Qml 子元素列表

Qml 子元素列表

• Itme 类 属性

children : list<Item>
resources : list<Object>

• children属性包含此项的可视子元素列表。resources属性包含希望按名称引用的非可视资源。
• 在添加子项目或资源时，通常没有必要引用这些属性，因为默认的数据属性会自动将子对象分配给适当的子项目和资源属性。

【注】list QML Basic Type

• 列表类型引用QML对象列表。
• 访问列表值的方式类似于访问JavaScript数组:
  • 使用[]方括号语法和逗号分隔的值来赋值
  • 长度属性提供列表中项目的数量
  • 使用[index]语法访问列表中的值
• 可以使用push方法将值动态添加到列表中，就像它是一个JavaScript数组一样
• 列表只能存储QML对象，不能包含任何基本类型值。(要在列表中存储基本类型，使用var类型代替。)
• 与c++集成时，请注意，从c++传递到QML的任何QQmlListProperty值都会自动转换为一个列表值，反之亦然。
• 例如，Item类型有一个状态列表类型属性，可以分配给它，并像下面这样使用:

import QtQuick 2.0

 Item {
     width: 100; height: 100

     states: [
         State { name: "activated" },
         State { name: "deactivated" }
     ]

     Component.onCompleted: {
         console.log("Name of first state:", states[0].name)
         for (var i = 0; i < states.length; i++)
             console.log("state", i, states[i].name)
     }
 }

• 定义的State对象将按照它们被定义的顺序添加到状态列表中。
• 如果列表只包含一个对象，方括号可以省略:

 import QtQuick 2.0

 Item {
     width: 100; height: 100
     states: State { name: "activated" }
 }

• 注意：创建后不能将对象单独添加或从列表中删除; 要修改列表的内容，必须将其重新分配给一个新列表。
• 注意: 不建议将列表类型作为自定义属性的类型。
  • var类型应该用于此目的，因为由var类型存储的列表可以在QML中以更大的灵活性操作。
• 这个基本类型由QML语言提供。

子元素列表示例

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

Window {
    id:window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Item{
        Column{
            id:col
            Rectangle{
                width:100
                height:100
                color: "pink"
                property string name: "rect1"
            }
            Rectangle{
                width:100
                height:100
                color: "green"
                property string name: "rect2"
            }
        }

        Component.onCompleted: {
            let childs = col.children
            console.log(childs.length)
            for(let i = 0; i < childs.length; ++i){
                console.log("name: " + childs[i].name)
                console.log("color: " + childs[i].color)
            }
        }
    }
}

• 输出：