如何正确对齐我的 qml 组件？

Question

我正在尝试编写简单的 QML 应用程序，它将包含许多重复的元素，按行组织。结果将类似于下面显示的结果：

目前，我有一段重复的代码可以实现这个目标：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.12

ApplicationWindow {
    Material.theme: Material.Dark
    visible: true
    width: 480
    height: 640
    title: qsTr("Hello world!")
    id: root

    GridLayout {
        anchors.horizontalCenter: parent.horizontalCenter
        columns: 3

        Text {
            color: "white"
            text: "aaa"
            font.family: "Ubuntu"
            font.pixelSize: 20
        }
        SpinBox {
            from: 0
            to: 1000
            stepSize: 1
            editable: true
        }
        Rectangle {
            width: 40
            height: 20
            color: "#F48FB1"
            Text {
                font.family: "Ubuntu"
                font.pixelSize: 16
                text: "ml"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }

        Text {
            color: "white"
            text: "bbb"
            font.family: "Ubuntu"
            font.pixelSize: 20
        }
        SpinBox {
            from: 0
            to: 100
            stepSize: 1
            editable: true
        }
        Rectangle {
            width: 40
            height: 20
            color: "#F48FB1"
            Text {
                font.family: "Ubuntu"
                font.pixelSize: 16
                text: "%"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
        Text {
            color: "white"
            text: "ccc"
            font.family: "Ubuntu"
            font.pixelSize: 20
        }
        SpinBox {
            from: 0
            to: 100
            stepSize: 1
            editable: true
        }
        Rectangle {
            width: 40
            height: 20
            color: "#F48FB1"
            Text {
                font.family: "Ubuntu"
                font.pixelSize: 16
                text: "%"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
}

然而，每一行都具有完全相同的结构，所以我尝试从代码中提取组件：

Item {
id: ingredient
property alias ingredientText: qualifier.text
property alias ingredientMaxValue: amount.to
property alias ingredientUnit: unit.text

RowLayout {
    Text {
        id: qualifier
        color: "white"
        text: "asdf"
        font.family: "Ubuntu"
        font.pixelSize: 20
    }
    SpinBox {
        id: amount
        from: 0
        to: 1000
        stepSize: 1
        editable: true
    }
    Rectangle {
        width: 40
        height: 20
        color: "#F48FB1"
        Text {
            id: unit
            font.family: "Ubuntu"
            font.pixelSize: 16
            text: "unit"
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
}

不幸的是，当我尝试在主要 window 中使用我的组件时，它没有对齐并且超出了它的可见部分（我可以在最大化 window 后再次看到它）：

ApplicationWindow {
Material.theme: Material.Dark
visible: true
width: 480
height: 640
title: qsTr("Hello world!")
id: root

GridLayout { // I know now it will not work properly for sure,
    //  but i tried using other layouts and alignment methods
    //  and it didn't help me at all
    anchors.horizontalCenter: parent.horizontalCenter
    columns: 3
    Ingredient {
        ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
        }
    }
}

问题是：如何使用 "Ingredient" 个组件实现第一张图片中的项目对齐？

Answer 1

您有以下错误：

您 children 的尺码不会被用来计算商品的尺码。要计算正确的大小，您可以使用 RowLayout 的 implicitWidth 和 implicitHeight。
您不能使用 GridLayout，因为正如您所指出的，每个 Ingredient 都是一个元素，在这种情况下，您必须使用 ColumnLayout。

Ingredient.qml

import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5

Item {
    id: ingredient
    property alias ingredientText: qualifier.text
    property alias ingredientMaxValue: amount.to
    property alias ingredientUnit: unit.text

    width: rl.implicitWidth
    height: rl.implicitHeight

    RowLayout {
        id: rl
        Text {
            id: qualifier
            color: "white"
            text: "asdf"
            font.family: "Ubuntu"
            font.pixelSize: 20
        }
        SpinBox {
            id: amount
            from: 0
            to: 1000
            stepSize: 1
            editable: true
        }
        Rectangle {
            width: 40
            height: 20
            color: "#F48FB1"
            Text {
                id: unit
                font.family: "Ubuntu"
                font.pixelSize: 16
                text: "unit"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.12

ApplicationWindow {
    Material.theme: Material.Dark
    visible: true
    width: 480
    height: 640
    title: qsTr("Hello world!")
    id: root

    ColumnLayout{
        width: parent.width
        height: implicitHeight
        Ingredient{
            Layout.alignment: Qt.AlignHCenter
            ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
        }
        Ingredient{
            Layout.alignment: Qt.AlignHCenter
            ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
        }
        Ingredient{
            Layout.alignment: Qt.AlignHCenter
            ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
        }
    }

}

Answer 2

问题出在 anchors。你应该阅读它，它会在未来帮助你。您可以尝试使用锚点来为您找到最佳定位。

简要介绍一下锚点。锚点将自动设置项目调整到屏幕的位置。另外，我建议阅读有关 Column, Row and Grid.

的内容

ApplicationWindow {
    Material.theme: Material.Dark
    visible: true
    width: 480
    height: 640
    title: qsTr("Hello world!")
    id: root

    GridLayout {
        anchors.fill: parent
        columns: 3
        Item {
            id: ingredient
            anchors.fill: parent

            property alias ingredientText: qualifier.text
            property alias ingredientMaxValue: amount.to
            property alias ingredientUnit: unit.text

            RowLayout {
                anchors.right: parent.right
                anchors.left: parent.left
                anchors.top: parent.top
                Text {
                    id: qualifier
                    color: "white"
                    text: "asdf"
                    font.family: "Ubuntu"
                    font.pixelSize: 20
                }
                SpinBox {
                    id: amount
                    from: 0
                    to: 1000
                    stepSize: 1
                    editable: true
                }
                Rectangle {
                    width: 40
                    height: 20
                    color: "#F48FB1"
                    Text {
                        id: unit
                        font.family: "Ubuntu"
                        font.pixelSize: 16
                        text: "unit"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
            }
        }
    }
}

如何正确对齐我的 qml 组件？

How do I align my qml component properly?

layout

qt

qml

qtquick2

qqmlcomponent