QML访问子项内容

访问Repeater子项

复制代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14

Window {
    width: 600
    height: 400
    visible: true
    title: "Loader + Component 原理演示"

    Repeater {
        id: rep
        model: 3
        Button {
            y: index * 60
            text: "btn" + index
        }
    }

    Button {
        id: btn2
        x: 200
        onClicked: {
            for (var i = 0; i < rep.count; i++) {
                if (rep.itemAt(i) instanceof Button) {
                    console.log(rep.itemAt(i).text)
                }
            }
        }
    }
}

if (rep.itemAt(i) instanceof Button) {

console.log(rep.itemAt(i).text)

}

Repeater的itemAt方法访问子项，这里子项类型为Button，可以打印处Button的text属性

访问Column布局的子项（一）

复制代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14

Window {
    width: 600
    height: 400
    visible: true
    title: "Loader + Component 原理演示"
    
    Column {
        id: col
        spacing: 20
        Button {
            id: btn
            text: "btn"
        }
        Text {
            id: text
            text: qsTr("text")
        }
        Rectangle {
            id: rect
            width: 100
            height: 200
            color: "black"
        }
    }
    Button {
        id: btn2
        x: 200
        onClicked: {
            console.log(col.children.length)
            for (var i = 0; i < col.children.length; i++) {
                if (col.children[i] instanceof Button
                        || col.children[i] instanceof Text) {
                    console.log(col.children[i].text)
                }
            }
        }
    }
}

如上Column布局下有Button、Text、Rectangle, 外部访问可

col.children.length返回column布局下有多少item
col.children $i$ instanceof Button判断column子控件是否为Button

访问Column布局的子项（二）

bash 复制代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14

Window {
    width: 600
    height: 400
    visible: true
    title: "Loader + Component 原理演示"

    Column {
        id: col
        spacing: 20
        Repeater {
            id: rep
            model: 3
            Button {
                y: index * 60
                text: "btn" + index
            }
        }
        Text {
            id: text
            text: qsTr("text")
        }
        Rectangle {
            id: rect
            width: 100
            height: 200
            color: "black"
        }
    }
    Button {
        id: btn2
        x: 200
        onClicked: {
            console.log(col.children.length)
            for (var i = 0; i < col.children.length; i++) {
                console.log(col.children[i])

                //                if (col.children[i] instanceof Button
                //                        || col.children[i] instanceof Text) {
                //                    console.log(col.children[i].text)
                //                }
            }
        }
    }
}

如上Column布局下有Repeater（包含3个Button）、Text、Rectangle, 外部访问可

bash 复制代码

Button {
        id: btn2
        x: 200
        onClicked: {
            console.log(col.children.length)
            for (var i = 0; i < col.children.length; i++) {
                console.log(col.children[i])

                //                if (col.children[i] instanceof Button
                //                        || col.children[i] instanceof Text) {
                //                    console.log(col.children[i].text)
                //                }
            }
        }
    }

如上运行结果

bash 复制代码

qml: 6
qml: Button_QMLTYPE_0(0x1e5eb1daa90)
qml: Button_QMLTYPE_0(0x1e5eb1daf40)
qml: Button_QMLTYPE_0(0x1e5eb1da220)
qml: QQuickRepeater(0x1e5e87374c0)
qml: QQuickText(0x1e5e8736a70)
qml: QQuickRectangle(0x1e5e8736890)

包含6个item，其中包含3个Button、1个Repeater、1个Text和1个Rectangle

访问ListView子项（一）

该场景是ListView的delegate子项为Text情况

bash 复制代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14

Window {
    width: 600
    height: 400
    visible: true
    title: "Loader + Component 原理演示"
    ListView {
        id: listView
        width: 00
        height: 300
        model: ["zhangsan", "lisi", "wangwu"]
        delegate: Text {
            text: modelData
        }
    }
    Button {
        id: btn2
        x: 200
        onClicked: {
            console.log(listView.contentItem.children.length)
            for (var i = 0; i < listView.contentItem.children.length; i++) {
                if (listView.contentItem.children[i] instanceof Text) {
                    console.log(listView.contentItem.children[i].text)
                }
            }
        }
    }
}

访问ListView子项（二）

bash 复制代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14

Window {
    width: 600
    height: 400
    visible: true
    title: "Loader + Component 原理演示"

    ListView {
        id: listView
        width: 00
        height: 300
        model: ["zhangsan", "lisi", "wangwu"]
        delegate: Column {
            Text {
                text: modelData + " txt"
            }
            Button {
                text: modelData + " btn"
            }
        }
    }
    Button {
        id: btn2
        x: 200
        onClicked: {
            console.log(listView.contentItem.children.length)
            for (var i = 0; i < listView.contentItem.children.length; i++) {
                var col = listView.contentItem.children[i]
                for (var j = 0; j < col.children.length; j++) {
                    console.log(col.children[j].text)
                }
            }
        }
    }
}

如上该场景是ListView的delegate子项为Column布局场景

bash 复制代码

for (var i = 0; i < listView.contentItem.children.length; i++) {
                var col = listView.contentItem.children[i]
                for (var j = 0; j < col.children.length; j++) {
                    console.log(col.children[j].text)
                }
            }

先获取col布局listView.contentItem.children $i$ ，在对column布局访问其子项