Qt/QML-分组和重用元素

有人能给我指出如何最好地组织我的QML的正确方向吗

目前，对于常见的单个组件，我创建了一个新的QML文件，并将其添加到我的参考资料下的

common

目录中

例如，我的

标签.qml

Text{
    width: parent.width * 0.5
    height: parent.height * 0.1
    color: "#ffffff"
    font.underline: true
    font.pointSize: 16
    verticalAlignment: Text.AlignBottom
    horizontalAlignment: Text.AlignLeft
}

然后在我的

表单.qml

中，我可以像这样导入和使用它：

   import "Common"

    Page {

        Label{
            id: username_lbl
            text: "Username"
            anchors.topMargin: parent.height * 0.1
        }

    ...
    }

    Button {
        id: left_btn
        width: parent.width * 0.5
        height: parent.height * 0.1

        anchors.bottom: parent.bottom
        anchors.right: parent.right

    }

    Button {
        id: right_btn
        width: parent.width * 0.5
        height: parent.height * 0.1

        anchors.bottom: parent.bottom
        anchors.left: parent.left
    }

但是，如果我想将多个组件组合在一起并引用它们以用于连接，我将如何执行上述操作

例如，我想要一对位于页面底部的按钮（下面只是一个示例，不起作用）：

所以我想要一个

按钮pair.qml

，它有点像这样：

   import "Common"

    Page {

        Label{
            id: username_lbl
            text: "Username"
            anchors.topMargin: parent.height * 0.1
        }

    ...
    }

    Button {
        id: left_btn
        width: parent.width * 0.5
        height: parent.height * 0.1

        anchors.bottom: parent.bottom
        anchors.right: parent.right

    }

    Button {
        id: right_btn
        width: parent.width * 0.5
        height: parent.height * 0.1

        anchors.bottom: parent.bottom
        anchors.left: parent.left
    }

然后在我的

Form.qml

中，我想使用这些按钮并为每个按钮添加一个事件处理程序：

import "Common"

Page {

    ButtonPair{id: back_forward_buttons}

    Connections {
        target: back_forward_buttons.left_btn
        onClicked: {
            stackView.pop();
    }

    Connections {
        target: back_forward_buttons.right_btn
        onClicked: {
            stackView.push("AnotherPage.qml");
    }

}

---

我是否需要将我的

按钮pair

包装在

组件中，并在我的页面上使用
加载器
，如果需要，我如何进入各个左/右按钮，以便在设计组件时绑定到单击的
，它被认为是一个黑匣子，具有必须从外部查看的属性和信号

例如，在您的示例中，ButtonPair必须显示两个信号：一个是左键按下时的信号，另一个是右键按下时的信号，我添加的另一个内容是两个属性，以便能够确定按钮的名称

我知道你已经将按钮的高度设置为父亲高度的10%，应该在下部，如果你想在顶部使用相同的组件？我将不得不创建另一个topButtonPair组件，如果我希望它们位于右侧，等等。当组件不是在实现中创建时，应该确定大小。在这种情况下，每个按钮必须占据父项的一半

利用上述信息，我们获得以下信息：

按钮pair.qml

import QtQuick 2.0
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11

Item{
    // expose properties and signals
    property string leftname: ""
    property string rightname: ""
    signal leftClicked()
    signal rightClicked()

    // internals
    RowLayout{
        anchors.fill: parent
        spacing: 0
        Button {
            text: leftname
            onClicked: leftClicked()
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
        Button {
            text: rightname
            onClicked: rightClicked()
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

注意：布局的使用是可选的，您可以使用锚定

现在在页面上使用：

Page {

    // other components

    ButtonPair{
        anchors.bottom: parent.bottom
        height: 0.1*parent.height // <--- Here the height is established
        anchors.left: parent.left
        anchors.right: parent.right
        leftname: "left text"
        rightname: "right text"
        onLeftClicked: console.log("left clicked")
        onRightClicked: console.log("right clicked")
    }
}

页面{
//其他组成部分
纽扣空气{
.bottom：parent.bottom
高度：0.1*parent.height/通常，@eyllanesc采用的黑匣子方法是更好的方法，应尽可能首选。但是，如果您确实需要从外部访问子项，您可以：

ButtonPair.qml：

Item {
    property alias leftButton: left_btn
    property alias rightButton: right_btn

    // … declarations of left_btn and right_btn as in your question
}

用法：

ButtonPair {
    leftButton {
        onClicked: {
            stackView.pop();
        }
    }
    rightButton {
        onClicked: {
            stackView.push("AnotherPage.qml");
        }
    }
}

您也可以在
连接中使用它。
但是，在95%的情况下，您应该像@eyllanesc的方法一样转发属性和信号，这将导致一个更清晰易读的界面。
您应该将这两个按钮包装在
项中
（或*Layout）元素并通过该元素中的别名属性公开两个子元素。然后，您可以像往常一样在代码中引用wohle元素。唯一的缺点是您必须特别注意按钮的组织。我建议使用
GridLayout
，只需将所需的所有内容作为属性公开即可可配置（甚至可以将JS用于动态项目组织）。这真的取决于你期望这对搭档的表现。谢谢，我缺少的是暴露信号。我同意不在可重用组件内固定尺寸和锚定，但有没有办法存储一组通用锚定以供重用？例如，如果我有一个始终具有相同锚定/尺寸的
标题标签
无论页面（固定在顶部）是否有存储和重用这些值的方法？在QML中，它类似于
TitleLabel{MySavedAnchors}
@user6635665锚点不是一个属性，而是两个属性之间的连接，即一个元素相对于另一个元素的几何结构。它不能。如果我的答案有帮助，请不要忘记将其标记为正确，如果您不知道如何做，请查看，这是感谢的最佳方式。作为最后一个问题，将再次感谢围绕这一点：存储常用字符串的最佳方法是什么？将它们作为属性包装在类似于上述内容的项目中？存储字符串？如果要存储字符串，请使用单例并在其中保存最常用的短语。还建议指出别名仅支持单级层次结构（我认为最多2个），即，例如：
属性别名foo\u属性：left\u btn.某些属性1.某些属性2
生成错误。