CODEWITHSUNDEEP
qtqml
Nmaster88
Nmaster88

Reputation: 1585

Align to right an item inside a RowLayout

I want to align the last item inside a RowLayout to the right, but the item stays right after the other items even if the RowLayout has a bigger width than width of all children. If i use anchors.right:parent.right it works well but then i get warnings.

ToolBar {
    height: globals.toolBar.height
    width:parent.width
background: Rectangle {
    anchors.fill: parent
    color:"white"
}

RowLayout {
    id: row
    anchors.fill: parent

    Button{
        Layout.alignment: Qt.AlignLeft
        contentItem: Image {
           source: "images/iconmenu.png"
         }
    }
    Button {
        Layout.alignment: Qt.AlignLeft
        contentItem: Image {
           source: "images/iconget.png"
        }
        ToolTip.text: qsTr("Get Data from Panel")
        ToolTip.visible: hovered
    }
    Button {
        id:buttonAbout
        Layout.alignment:Qt.AlignRight
        font.family: fontAwesomeSolid.font
        width:15
        height: 15
        text: "\uf129"
        ToolTip.text:qsTr("about")
        ToolTip.visible: hovered
        contentItem: Text {
            anchors.fill:buttonAbout
            anchors.right:buttonAbout.right
            anchors.topMargin: 3
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCente
            text: buttonAbout.text
        }
        background:
            Rectangle{
                width:20
                height: 20
                anchors.right: parent.right
                anchors.topMargin: 20
                radius:10
                border.width: 1
                border.color:"gray"
            }
        onClicked: popup.open()
    }
    Item {
        Layout.fillWidth: true
    }
}
}

| | item 1| | item 2 | | item 3 | ------------------ |

what i want is this

| | item 1| | item 2 |---------------------| item 3 ||

Upvotes: 2

Views: 5755

Answers (3)

BuvinJ
BuvinJ

Reputation: 11046

I had a very similar need and ended up swapping out a Row for an Item and then put a series of anchors in place to chain together the elements I needed horizontally lined up.

To get something like the requested:

| | item 1| | item 2 |---------------------| item 3 ||

I anchored item1.left to parent.left and item3.right to parent.right. Then, item2.left to item1.right and item2.right to item3.left. Setting the widths for item 1 and item 3 implicitly sets the item 2 width. If that doesn't quite work for you because item 2 needs to be a particular width (and you can't just have its content left aligned), throw in a dummy item X after it with nothing in it to fill in that empty space, and then build the anchor chain accordingly.

Such code is quite verbose, and obviously less than pretty, but the approach works and is fairly simple to implement.

Upvotes: 0

Imre
Imre

Reputation: 332

I think this is the ultimate best solution:

Button{
    id:buttonAbout
    Layout.alignment: Qt.AlignRight
}

Upvotes: -1

Nmaster88
Nmaster88

Reputation: 1585

It seems that Row and RowLayout doesn't let empty spaces to exist like that. But it can be solved using a component that does fillwidth:true

    Item{
        Layout.fillWidth: true
        height: buttonAbout.implicitHeight
        Button{
            id:buttonAbout
}
}

Upvotes: 5

Related Questions