QML ListView 访问委托的一个项目

Question

this is my code:

main.qml

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

Button {
    id:btn
    x : 100
    y : 100
    text: "Click Her to check one of the checkbox! "
}
ScrollView {
    width: 40
    height: parent.height
    ListView {
        id : view
        width: parent.width
        leftMargin: 5
        model: 20
        delegate:
            MyCheckBox {
        }
      }
   }
}

MyCheckBox.qml

CheckBox {
    id : chk
    width: 25
    height: 25
}

i wanna check on of the Checkbox with the Button OnClicked ( for example when i click, i Check the ItemAtIndex 2), to do this i need to access to the Object of my listview, there is a function available since QT 5.13 Item itemAtIndex(int index) but i'm using QT 5.12, is there another way to do it? Thanks for your help

Answer 1

Trying to manually modify an item in a ListView is actually the wrong approach. If you have 1000 items in your list, ListView is smart enough to not create 1000 delegate items. Instead, it creates only as many as it needs for the visible region of the list and reuses them with different model data as you scroll up and down. So because of that, if you try to access the item at index 987 for instance, that item might not even exist.

The better way to do handle this is to include the checked state in your model, and update that model when you want the item to change.

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    ListModel {
        id: myModel
        ListElement {
            isChecked: false
        }
        ListElement {
            isChecked: false
        }
        ListElement {
            isChecked: false
        }
        ListElement {
            isChecked: false
        }
        ListElement {
            isChecked: false
        }
    }

    Button {
        id:btn
        x : 100
        y : 100
        text: "Click Her to check one of the checkbox! "

        // Check index 3
        onClicked: {
            myModel.set(3, {"isChecked": true})
        }
    }

    ScrollView {
        width: 40
        height: parent.height
        ListView {
            id : view
            width: parent.width
            leftMargin: 5
            model: myModel
            delegate: MyCheckBox {
                checked: isChecked
            }
        }
    }
}

Answer 2

One way to achieve is creating a list of items. Add item to list onCompleted and remove onDestruction . Or use onAdd and onRemove in ListView . Following code worked for me in online compiler :

import QtQuick 2.3
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    Button {
        property int checkBoxIndex: 5
        
        id:btn
        x : 100
        y : 100
        text: "Click Her to check one of the checkbox! "
        
        onClicked: {
            var item =  view.items[checkBoxIndex];
            
            if (item)
                item.toggle();
            else
                console.log("Item not found at index: " + checkBoxIndex);
        }
    }
    
    ScrollView {
        width: 40
        height: parent.height
        ListView {
            property var items: []
            
            id : view
            width: parent.width
            leftMargin: 5
            model: 20
            delegate: CheckBox {
                id : chk
                width: 25
                height: 25
                
                Component.onCompleted: view.items[index] = chk;
                Component.onDestruction: view.items[index] = undefined;
            }
        }
    }
}

Update: Removing item by splice(index, 1) might disorder indexes of other items. So I think assigning undefined is a safer solution.

Note: Don't use this solution if you don't really have to get the item itself, otherwise checkout @JarMan's answer, using model is the right way to go.

Answer 3

You can Use itemAtIndex() like intemAt() in Repeater .