QML获取代理和复杂子控件的方法

QML获取子控件的方法（loader，ListView等），也可以说是获取使用代理方式生成子的控件的方法。

废话不多说，先展示代码：

import QtQuick 2.12
import QtQml 2.12
import QtQuick.Window 2.12
import QtQuick.VirtualKeyboard 2.4
import QtQuick.Controls 2.5
Window {
    id: window
    width: 800
    height: 480
    visible: true
    title: qsTr("Hello World")
    Loader
    {
        id:myloader
        width: 800
        height: 430
        sourceComponent: page1
        onSourceComponentChanged:
        {
            if(sourceComponent === page2)
            {
                console.log("myloader.children[0].childrep",myloader.children[0].childrep)//通过暴露出来的接口进行访问
                console.log("myloader.children[0].childrep",myloader.item.childrep)//同上
                console.log("myloader.children[0].childrep",myloader.children[0].children[0].children[5])//通过子控件生成的顺序访问
            }
        }
    }
    Component
    {
        id:page1
        Item {
        }
    }
    Component
    {
        id:page2
        Item
        {
            property alias childrep: rep
            Column
            {
                spacing: 5
                Repeater
                {
                    id:rep
                    model: 5
                    Rectangle
                    {
                        width: 50
                        height: 50
                        color: "red"
                    }
                }
            }
        }
    }
    Button
    {
        x:350
        y:430
        width: 100
        height: 50
        onClicked:
        {
            myloader.sourceComponent = page2
        }
    }

}

大家看上面代码段，使用了loader进行控件的加载，在组件sourceComponent改变的时候，我们可以通过组件的id来对我们想要操作的组件子控件属性进行操作。

 拿到想要操作的组件之后就可以获取组件的子控件了，我这里是暴露出控件来获取Repeater的id

取loader子控件的方法（暂时用的这些）
    1.通过子控件生成的顺序访问
    2.通过暴露出来的接口进行访问
    打印信息如下：
    qml: myloader.children[0].childrep QQuickRepeater(0x4a15ba60)
    qml: myloader.children[0].childrep QQuickRepeater(0x4a15ba60)
    qml: myloader.children[0].childrep QQuickRepeater(0x4a15ba60)

对于ListView可以代理内容和标题头，同样的可以根据暴露出来的接口对子控件属性进行更改

代理内容：list.contentItem

代理头：    list.headerItem

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12
import QtQuick.Controls 2.5
Window {
    width: 1024
    height: 800
    visible: true
    title: qsTr("Hello World")

    ListModel {
        id: listModelType
        ListElement {
            q: "哈哈"
            w: "嘿嘿"
            e: "嘻嘻"
        }
        ListElement {
            q: "噗噗"
            w: "呼呼"
            e: "啾啾"
        }
    }
    Button
    {
        width: 100
        height: 50
        onClicked:
        {
            list.contentItem.children[1].aliText.color = "red"
            console.log(list.contentItem.children[1].aliText)

            list.headerItem.aliRec.color = "red"
            console.log(list.headerItem.aliRec)
        }
    }
    ListView
        {
            id:list
            y:60
            width: 1024
            height: 358
            focus: true
            header:headContent
            headerPositioning:ListView.OverlayHeader
            model:listModelType
            clip: true
            delegate: showContent
        }
        Component//展示的内容
        {
            id:showContent
            Rectangle
            {
                id:rec
                property alias aliText: txt
                width: 1024
                height: 70
                Text {
                    id:txt
                    width: 140
                    height: parent.height
                    color: "black"
                    font.pixelSize: 18
                    horizontalAlignment:Text.AlignHCenter
                    verticalAlignment:Text.AlignVCenter
                    text: q
                }
                Text {
                    x:140
                    width: 330
                    height: parent.height
                    color: "black"
                    font.pixelSize: 18
                    horizontalAlignment:Text.AlignHCenter
                    verticalAlignment:Text.AlignVCenter
                    text: w
                }
                Text {
                    x:470
                    width: 330
                    height: parent.height
                    color: "black"
                    font.pixelSize: 18
                    horizontalAlignment:Text.AlignHCenter
                    verticalAlignment:Text.AlignVCenter
                    text: e
                }
            }
        }

        Component//标题头
        {
            id:headContent
            Item
            {
                property alias aliRec: headRec
                width:1024
                height: 70
                z:2
                Rectangle//表头
                {
                    id:headRec
                    anchors.fill:parent
                    color: "yellow"
                    Text {
                        width: 140
                        height: 50
                        color: "red"
                        font.pixelSize: 18
                        horizontalAlignment:Text.AlignHCenter
                        verticalAlignment:Text.AlignVCenter
                        text: qsTr("头1")
                    }
                    Text {
                        x:140
                        width: 330
                        height: 50
                        color: "red"
                        font.pixelSize: 18
                        horizontalAlignment:Text.AlignHCenter
                        verticalAlignment:Text.AlignVCenter
                        text: qsTr("头2")
                    }
                    Text {
                        x:470
                        width: 330
                        height: 50
                        color: "red"
                        font.pixelSize: 18
                        horizontalAlignment:Text.AlignHCenter
                        verticalAlignment:Text.AlignVCenter
                        text: qsTr("头3")
                    }
                }
            }
        }

}

这里用了两种方式：

建议采用第二种—>直接给Component套一个Item，这样能直接取

第一种寻子控件也可以实现，略显麻烦

 运行效果如下：

点击按钮后可以看到头的背景颜色，和内容“哈哈”字体颜色改变

 点击按钮打印信息如下：