QML 在一行中显示多个文本答案

【问题标题】：QML Display multi text in one ROWQML 在一行中显示多个文本
【发布时间】：2019-09-12 09:29:02
【问题描述】：

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

我的代码是

                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
                        }
                    }

输出是

我希望文本字段（即名称、喜爱颜色和年龄）以更加一致的方式出现。在简单的单词中以简单的表格形式显示。即所有最喜欢的颜色和年龄从整个列表中的同一点开始。

谢谢

【问题讨论】：

标签： qt qml qtquick2

【解决方案1】：

您应该使用Layout.preferredWidth 和Layout.maximumWidth 固定textId2 和textId1 的宽度，并将true 分配给Layout.fillWidth 为textId。

【讨论】：

【解决方案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
            }
        }

【讨论】：

欢迎来到 StackOverflow。虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。一个好的答案总是会解释所做的事情以及为什么以这种方式完成，不仅对 OP，而且对 SO 的未来访问者。