如何将元素添加到 QML 中现有布局的顶部

Question

我有一个现有的 ColumnLayout，我想在其顶部添加一个新元素而不更改现有的 ColumnLayout。我使用别名来引用现有的 ColumnLayout，但是当我添加新元素时，它会转到布局的底部。如何将其添加到顶部？

BaseColumn.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Rectangle {
    property alias content: content
    anchors.fill: parent
    ColumnLayout {
        id: content
        Text {
            id: name
            text: qsTr("World")
        }
    }
}

现在在另一个文件 ChildColumn.qml 中我正在执行此操作，但这会将此文本添加到 ColumnLayout 的底部而不是顶部。

BaseColumn {
    content.data [
        Text {
            id: name
            text: qsTr("Hello")
        }
    ]
}

Answer 1

您可以有两个

ColumnLayout

，以便用户自定义始终位于您的前面，例如

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    BaseColumn {
        Text {
            text: qsTr("Hello")
        }
    }
}

// BaseColumn.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Frame {
    default property alias __content: topColumnLayout.data
    ColumnLayout {
        ColumnLayout {
            id: topColumnLayout
        }
        Text {
            id: name
            text: qsTr("World")
        }
    }
}

但是，话虽如此，您的要求可能可以通过

Frame

footer

属性更简单地实现，例如

// BaseColumn.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Frame {
    default property alias __content: topColumnLayout.data
    ColumnLayout {
        id: topColumnLayout
    }
    footer: Text {
        id: name
        text: qsTr("World")
    }
}