QML学习笔记【07】：QML访问复杂组件的子项

1、访问复杂组件的子项 ---> Row、Column、Grid、Flow布局子项或Repeater子项

//访问复杂组件的子项 ---> Row、Column、Grid、Flow布局子项或Repeater子项
Window{
    width: 640; height: 480
    visible: true
    title: qsTr("Hello World")

    Column{
        id: col
        spacing: 30; x:100
        Repeater{
            id: rep
            model: 3
            Button{
                id: btn
                width: 100; height: 50
                y: index * 60
                text: "btn" + index
            }
        }
        Text{
            id: txt
            text: "text"
        }
        Rectangle{
            id: rect
            width: 100; height: 50
            color: "red"
        }
    }

    //访问子控件
    Button{
        id: btn1
        x:300
        text: "clicked!"
        onClicked: {
            //访问Column布局中的Repeater中的子项
            //Repeater的itemAt方法可访问repeater的子项
            //Repeater的count属性为repeater中子项的数量
//            for(var i=0; i<rep.count; i++){
//                console.log(rep.itemAt(i).text)
//            }
            //访问Column中的所有子项
            //Column的children为所以子项，length为子项的数量
            //instanceof 用于限制 控制的类型，只匹配 限制的类型
            for(var i=0; i<col.children.length; i++){
                if(col.children[i] instanceof Button){
                    console.log(col.children[i].text)
                }
            }
        }
    }
}

2、访问复杂组件的子项 ---> ListView子项

//访问复杂组件的子项 ---> ListView子项
Window{
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //创建子控件
    ListView{
        id: list
        width: 100; height: 100
        model: ["zhangsan","lisi","wangwu"] //定义全部数据
        delegate: Text { //控制单个项的绘制
            id: txt
            height: 25
            y: index * 35
            text: modelData
        }
    }

    //访问子控件
    Button {
        id: btn2
        x: 200
        text: "clicked!"
        onClicked: {
            console.log(list.count) //3
            console.log(list.contentItem.children.length) //4
            for(var i=0; i<list.contentItem.children.length; i++){
                if(list.contentItem.children[i] instanceof Text){
                    console.log(list.contentItem.children[i].text)
                }
            }
        }
    }
}

3、访问复杂组件的子项 ---> ListView子项为Column布局等

//访问复杂组件的子项 ---> ListView子项为Column布局等
Window{
    width: 640; height: 480
    visible: true
    title: qsTr("Hello World")

    //创建子控件
    ListView{
        id: list
        width: 100; height: 100
        model: ["zhangsan","lisi","wangwu"] //定义全部数据
        delegate: Column { //控制单个项的绘制
            x: 20
            Text {
                id: txt
                height: 30
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: modelData + " text"
            }
            Button{
                id: btn
                text: modelData + " btn"
            }
        }
    }
    
    //访问子控件
    Button {
        id: btn2
        x: 200; y: 20
        text: "clicked!"
        onClicked: {
            console.log(list.count) //3
            console.log(list.contentItem.children.length) //4

            for(var i=0; i<list.contentItem.children.length; i++){
                //获取ListView子项
                var col = list.contentItem.children[i]
                //获取子项的子项
                for(var j=0; j<col.children.length; j++){
                    if(col.children[j] instanceof Text)
                        console.log(col.children[j].text)
                }
            }
        }
    }
}