将项目添加到自定义组件的布局

debugcn 发表于 Dev

Avb

我有一个自定义设置Footer Component，希望在我的QML应用程序的其他位置重复使用：

Rectangle {
    color: "gold"
    height: 50
    anchors {
        bottom: parent.bottom
        left: parent.left
        right: parent.right
    }

    RowLayout {
        anchors.fill: parent
        anchors.margins: 10

        Button {
            text: "quit"
        }
    }
}

使用起来很简单：

Window {
    visible: true

    Footer {
    }
}

但是，现在我想在一个视图中向RowLayout我的按钮添加一个“ ButtonA”，Footer在另一个视图中向其添加一个“ ButtonB” 。

我该如何实现？

米奇

看到这个答案。

您必须在中声明一个default属性Footer.qml：

import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    color: "gold"
    height: 50

    default property alias content: rowLayout.children

    anchors {
        bottom: parent.bottom
        left: parent.left
        right: parent.right
    }

    RowLayout {
        id: rowLayout
        anchors.fill: parent
        anchors.margins: 10

        Button {
            text: "quit"
        }
    }
}

这样可确保将任何声明为Footer实例子项的项添加到其子项中RowLayout。

main.qml：

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: viewAComponent
    }

    Component {
        id: viewAComponent

        Rectangle {
            id: viewA
            color: "salmon"

            Footer {
                id: footerA

                Button {
                    text: "Go to next view"
                    onClicked: stackView.push(viewBComponent)
                }
            }
        }
    }

    Component {
        id: viewBComponent

        Rectangle {
            id: viewB
            color: "lightblue"

            Footer {
                id: footerB

                Button {
                    text: "Go to previous view"
                    onClicked: stackView.pop()
                }
            }
        }
    }
}

我用作StackView在视图之间导航的便捷方式。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。