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

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

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