QML 在一行中显示多个文本

Question

我在以对齐方式显示列表视图中的文本时遇到问题。

MyCodes

                delegate: Rectangle{

                    width : parent.width
                    height: textId.implicitHeight+20
                    color: "white"
                    border.color: "#e4e4e4"
                    radius: 0
                    RowLayout{
                        anchors.fill: parent
                        anchors.margins: 20
                        Text{
                            id:textId
                            text : names
                        //    wrapMode: Text.Wrap
                          //  Layout.fillWidth: true
                           // width:300
                        }
                        Text{
                            id:textId2
                            text :favoriteColor
                          //  wrapMode: Text.Wrap
                            //Layout.fillWidth: true
                            //width: parent.width
                           // width:300
                        }

                        Text{
                            id:textId1
                            text :age
                           // wrapMode: Text.Wrap
                          //  width: parent.width
                        }
                    }

输出是

我希望文本字段（即姓名、favoriteColor 和年龄）以更一致的方式出现。 In Simple words 以简单的 table 形式显示。 即所有最喜欢的颜色和年龄从整个列表的同一点开始。

谢谢

Answer 1

您应该使用 Layout.preferredWidth and Layout.maximumWidth, and assign true to Layout.fillWidth 固定 textId2 和 textId1 的宽度 textId。

Answer 2

        RowLayout{
            anchors.fill: parent
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            layoutDirection: Qt.LeftToRight
            spacing: 10

            Text {
                id:textId
                text :favoriteColor
                Layout.maximumWidth: advance.width
                Layout.preferredWidth: advance.width
            }

            Text {
                id:textId1
                text :age
                Layout.fillWidth: true
            }
        }