如何将附加属性放置到子项

Question

假设我有一个类似的组件

RowLayout {
    MyItem {
        Layout.fillWidth: true
        Layout.fillHeight: true
        ... // other properties
    }
    MyItem {
        Layout.fillWidth: true
        Layout.fillHeight: true
        ... // other properties
    }
}

其中CCD_ 1被定义为类似于这个

Rectangle {
    ... // other properties
    // Layout.fillWidth: true
    // Layout.fillHeight: true
}

我可以把Layout.fillWidth放到MyItem吗？这样我就不需要在RowLayout中重复了？

Answer 1

我可以把Layout.fillWidth放在MyItem中吗，这样我就不需要在RowLayout中重复它了？

我认为这个问题已经有了答案：如果你不想重复，只需使用Repeater类型。文件指出

中继器实例化的项目按顺序作为中继器父级的子级插入插入在中继器在其父堆栈列表中的位置之后立即开始。这允许在布局内使用中继器。

以下文档中的示例使用Row，但同样的方法也可以应用于其他布局，例如RowLayout。实际上，它适用于根据Repeater特性（"在父级中插入项"）附加属性的任何类型。

下面是一个例子。假设我们已经定义了一个Example类型。

import QtQuick 2.5
Rectangle {
    property alias text: inner.text
    color: "steelblue"
    Text {
        id: inner
        anchors.centerIn: parent
        font.pixelSize: 30
    }    
}

我们可以将布局属性添加到MyItem.qml1内部的Example类型中，例如：

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window {
    id: window
    width: 600
    height: 400
    visible: true
    RowLayout {
        id: row
        anchors.fill: parent
        Repeater {
            model: 6               
            delegate : Example {
                text: index
                Layout.fillWidth: true    // layout options added in the delegate
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter
                Layout.maximumWidth: parent.width / model.length
            }
        }
    }
}

Repeater的model属性可以是字符串数组，也可以是其他模型。

这种方法足够灵活，可以组合几个Repeater来创建更复杂的结构。例如，请参阅以下示例，其中Text用于填充GridLayout内部的屏幕：

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window {
    id: window
    width: 600
    height: 400
    visible: true
    GridLayout {
        id: grid
        anchors.fill: parent
        rows: 2
        columns: 6
        Repeater {
            model: grid.columns
            Text {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.row: 0
                Layout.column: index
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: index + 1    // index of the repeater as text
            }
        }
        Repeater {
            model: grid.columns
            Text {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.row: 1
                Layout.column: index
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: index + 7
            }
        }
    }
}

Answer 2

是的，您可以这样做，但每当您决定在没有名为Layout.fillWidth的附加属性的上下文中使用该组件时，或者更一般地说，每当您决定不将其用作布局中的顶部元素时，它都会以错误告终。