Доступ к Listview currentIndex от делегата

Question

Доступ к Listview currentIndex от делегата

У меня есть QML ListView, где делегат загружает его компонент из другого файла. При нажатии на элемент делегата я хочу обновить ListView. CurrentIndex и highlight выбранный элемент.

Это работает, когда я явно задаю id из ListView. Однако, поскольку я хочу использовать делегат Component также и для других ListViews, Я пытаюсь найти общий способ доступа к ListView.currentIndex из делегата Component.

Вот Код:

Главное.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{}

    }

}

Контакт.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

        }

    }

}

Любая помощь действительно ценится!

911 2

qt qml qtquick2

2 ответов:

Comments

Ничего не найдено.

Mitch · Accepted Answer · 2015-08-12 16:31:01

Здесь есть две проблемы:

необходимо указать присоединенные свойства ListView с именем элемента, из которого они доступны.

СВОЙСТВО currentIndex является свойствомListView типа элемента , а неприсоединенного объекта свойства .

Чтобы исправить их обоих, сначала измените это:
ListView.currentIndex = index;
К этому:
delegate.ListView.view.currentIndex = index;
А затем дайте вашему делегату id:
Component {
    id: contact

    Rectangle {
        id: delegate
    // ...
}
Это продемонстрировано (частично) на примере . Использование раздел документации:

ListView присоединяет ряд свойств к корневому элементу делегата, например ListView: isCurrentItem. В следующем примере элемент делегата root может получить доступ к этому вложенному свойству непосредственно в виде ListView.isCurrentItem, в то время как дочерний объект contactInfo должен ссылаться на это свойство как на оболочку.элемент управления ListView.искуррентитем.

folibis · Accepted Answer · 2015-08-12 20:27:08

Использовать присоединенное свойство ListView.view:

Это присоединенное свойство содержит представление, управляющее этим делегатом пример

Небольшой пример:

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
        }
    }
}