从 Delegate 访问 Listview currentIndex
Access Listview currentIndex from Delegate
我有一个 QML ListView
,委托从另一个文件加载它的组件。单击委托项目时,我想更新 ListView
。 CurrentIndex
和 highlight
所选项目。
当我明确设置 ListView
的 id
时,它起作用了。然而,由于我想将委托的 Component
也用于其他 ListView
,我正在努力寻找一种通用的方法来从委托 Component
中访问 ListView.currentIndex
。
代码如下:
main.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
ListModel {
id: contactsModel
ListElement {
name: "Bill Smith"
}
ListElement {
name: "John Brown"
}
ListElement {
name: "Sam Wise"
}
}
ListView{
id: contactsView
anchors.left: parent.left
anchors.top: parent.top
width: parent.width
height: parent.height
orientation: Qt.Vertical
spacing: 10
model: contactsModel
delegate: Contact{}
}
}
Contact.qml(委托使用的组件)
import QtQuick 2.0
Component{
id: contact
Rectangle{
width: 200
height: 50
color: ListView.isCurrentItem ? "#003366" : "#585858"
border.color: "gray"
border.width: 1
MouseArea{
anchors.fill: parent
onClicked: {
ListView.currentIndex = index; // <---- does not work
// contactsView.currentIndex = index; // <---- Works
}
}
Text{
anchors.centerIn: parent
color: "white"
text: name
}
}
}
非常感谢任何帮助!
这里有两个问题:
- 您需要使用访问它们的项目的名称来限定
ListView
的附加属性。
-
currentIndex
属性 是 a property of the ListView
item type, not the attached property object.
要修复它们,首先更改此:
ListView.currentIndex = index;
对此:
delegate.ListView.view.currentIndex = index;
然后给你的代表一个 id
:
Component {
id: contact
Rectangle {
id: delegate
// ...
}
文档的 Example Usage 部分(部分)证明了这一点:
ListView attaches a number of properties to the root item of the delegate, for example ListView:isCurrentItem. In the following example, the root delegate item can access this attached property directly as ListView.isCurrentItem, while the child contactInfo object must refer to this property as wrapper.ListView.isCurrentItem.
使用附件属性ListView.view
:
This attached property holds the view that manages this delegate
instance
小例子:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window {
width: 600
height: 400
visible: true
Component {
id: listDelegate
Rectangle {
height: 30
width: parent.width
color: ListView.isCurrentItem ? "orange" : "white"
property var view: ListView.view
property int itemIndex: index
Text { anchors.centerIn: parent; text: name }
MouseArea {
anchors.fill: parent
onClicked: {
view.currentIndex = itemIndex;
}
}
}
}
RowLayout {
anchors.fill: parent
ListView {
Layout.minimumWidth: parent.width / 2
Layout.fillHeight: true
model: ListModel {
ListElement {name: "item1.1"}
ListElement {name: "item1.2"}
ListElement {name: "item1.3"}
}
delegate: listDelegate
}
ListView {
Layout.minimumWidth: parent.width / 2
Layout.fillHeight: true
model: ListModel {
ListElement {name: "item2.1"}
ListElement {name: "item2.2"}
ListElement {name: "item2.3"}
}
delegate: listDelegate
}
}
}
我有一个 QML ListView
,委托从另一个文件加载它的组件。单击委托项目时,我想更新 ListView
。 CurrentIndex
和 highlight
所选项目。
当我明确设置 ListView
的 id
时,它起作用了。然而,由于我想将委托的 Component
也用于其他 ListView
,我正在努力寻找一种通用的方法来从委托 Component
中访问 ListView.currentIndex
。
代码如下:
main.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
ListModel {
id: contactsModel
ListElement {
name: "Bill Smith"
}
ListElement {
name: "John Brown"
}
ListElement {
name: "Sam Wise"
}
}
ListView{
id: contactsView
anchors.left: parent.left
anchors.top: parent.top
width: parent.width
height: parent.height
orientation: Qt.Vertical
spacing: 10
model: contactsModel
delegate: Contact{}
}
}
Contact.qml(委托使用的组件)
import QtQuick 2.0
Component{
id: contact
Rectangle{
width: 200
height: 50
color: ListView.isCurrentItem ? "#003366" : "#585858"
border.color: "gray"
border.width: 1
MouseArea{
anchors.fill: parent
onClicked: {
ListView.currentIndex = index; // <---- does not work
// contactsView.currentIndex = index; // <---- Works
}
}
Text{
anchors.centerIn: parent
color: "white"
text: name
}
}
}
非常感谢任何帮助!
这里有两个问题:
- 您需要使用访问它们的项目的名称来限定
ListView
的附加属性。 -
currentIndex
属性 是 a property of theListView
item type, not the attached property object.
要修复它们,首先更改此:
ListView.currentIndex = index;
对此:
delegate.ListView.view.currentIndex = index;
然后给你的代表一个 id
:
Component {
id: contact
Rectangle {
id: delegate
// ...
}
文档的 Example Usage 部分(部分)证明了这一点:
ListView attaches a number of properties to the root item of the delegate, for example ListView:isCurrentItem. In the following example, the root delegate item can access this attached property directly as ListView.isCurrentItem, while the child contactInfo object must refer to this property as wrapper.ListView.isCurrentItem.
使用附件属性ListView.view
:
This attached property holds the view that manages this delegate instance
小例子:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window {
width: 600
height: 400
visible: true
Component {
id: listDelegate
Rectangle {
height: 30
width: parent.width
color: ListView.isCurrentItem ? "orange" : "white"
property var view: ListView.view
property int itemIndex: index
Text { anchors.centerIn: parent; text: name }
MouseArea {
anchors.fill: parent
onClicked: {
view.currentIndex = itemIndex;
}
}
}
}
RowLayout {
anchors.fill: parent
ListView {
Layout.minimumWidth: parent.width / 2
Layout.fillHeight: true
model: ListModel {
ListElement {name: "item1.1"}
ListElement {name: "item1.2"}
ListElement {name: "item1.3"}
}
delegate: listDelegate
}
ListView {
Layout.minimumWidth: parent.width / 2
Layout.fillHeight: true
model: ListModel {
ListElement {name: "item2.1"}
ListElement {name: "item2.2"}
ListElement {name: "item2.3"}
}
delegate: listDelegate
}
}
}