Best way to "align" items in Row



  • I'm aware I cannot use anchors in Column/Row but I'm asking how to achieve the same result. Basically I'm creating a simple "table" with labels on the left and items on the right. These right items can be StatusIndicator (so their width it's well-defined) or text. In this case I want the text right-aligned and that grows to the left, something like this:

    label1           LED
    label2           LED
    label3   textexttext
    

    Here my code:

    Column {
        id: column
        spacing: 5
        anchors.left: parent.left
        anchors.leftMargin: 20
    
        Row {
            Text {
                width: _LABEL_WIDTH
                text: qsTr("Label 1")
            }
    
            StatusIndicator {
                width: 30
                height: 30
                anchors.verticalCenterOffset: 3
                anchors.verticalCenter: labelOnline.verticalCenter
                active: true
            }
        }
    
        Row {
            Text {
                width: _LABEL_WIDTH
                text: qsTr("Label 2")
            }
    
            StatusIndicator {
                width: 30
                height: 30
                anchors.verticalCenterOffset: 3
                anchors.verticalCenter: labelOnline.verticalCenter
                active: true
            }
        }
    
        Row {
            Text {
                text: qsTr("Label 3")
            }
    
            Text {
                text: "blablabla"
                horizontalAlignment: Text.Right
                // how to fill all the space to the right margin?
            }
        }
    }


  • @Mark81 as ugly workaround I did something like this:

        Row {
            Text {
                id: labelId
                text: qsTr("Label 3")
            }
    
            Text {
                width: column.width - labelId.width
                text: "blablabla"
                horizontalAlignment: Text.AlignRight
            }
        }


  • Hi @Mark81
    This can be done easily with layouts

       ColumnLayout {
            id: column
            height: parent.height
            width: parent.width
            RowLayout {
                width: parent.width
                Text {
                    text: qsTr("Label 1")
                    Layout.fillWidth: true
                }
                StatusIndicator {
                    Layout.alignment: Qt.AlignRight
                }
            }
            RowLayout {
                 width: parent.width
                Text {
                    text: qsTr("Label 3")
                    Layout.fillWidth: true
                }
                Text {
                    text: "blablablablablablablablablablablablablablabla"
                    Layout.alignment: Qt.AlignRight
                }
            }
        }
    


  • @LeLev Interesting, I'll give it a try. Thanks.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.