QML 在一行中显示多个文本

Posted 2023-02-16

【中文标题】QML 在一行中显示多个文本

【英文标题】：QML Display multi text in one ROW

【发布时间】：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
                        
                    

输出是

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

谢谢

【参考方案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
            
        

【讨论】：

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