Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [SOLVED] RowLayout.spacing isn't working when RowLayout.anchors.fill = parent
Forum Updated to NodeBB v4.3 + New Features

[SOLVED] RowLayout.spacing isn't working when RowLayout.anchors.fill = parent

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 2 Posters 2.5k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    Dmitry.Sokolov
    wrote on last edited by
    #1

    I'm trying to make a ToolBar with ToolButtons on the left side and a Text label on the right side. The spacing between ToolButtons must be equal to 4.
    When RowLayout width is set equal to Window width (via anchors or width properties) then ToolButtons are distributed along a RowLayout and spacing between them are not equal to 4.

    Is there any property that handles the behavior of RowLayout items? (A kind of alignment within a container)

    @
    ApplicationWindow {
    width: 640
    height: 480

    property real dip: Screen.pixelDensity * 25.4 / 160     // Device Independent Pixel (1 px at 160 DPI)
    property real tbWidth: Math.round(48 * dip)             // ToolButton width
    property real tbHeight: Math.round(48* dip)             // ToolButton height
    
    toolBar: ToolBar {
        id: tb1
        RowLayout {
            id: tbRow1
            anchors.fill: parent
            spacing: 4
            ToolButton {
                id: tbBtn1
                implicitWidth: tbWidth
                implicitHeight: tbHeight
                Image {
                    anchors.fill: parent
                    source: "qrc:///images/icon1.svg"
                    sourceSize.width: tbWidth
                    sourceSize.height: tbHeight
                    fillMode: Image.Pad
                }
            }
            ToolButton {
                id: tbBtn2
                implicitWidth: tbWidth
                implicitHeight: tbHeight
                Image {
                    anchors.fill: parent
                    source: "qrc:///images/icon2.svg"
                    sourceSize.width: tbWidth
                    sourceSize.height: tbHeight
                    fillMode: Image.Pad
                }
            }
            Text {
                id: text1
                text: "t1"
                anchors.right: parent.right
                font.pixelSize: 12
            }
        }
    }
    

    }
    @

    1 Reply Last reply
    0
    • J Offline
      J Offline
      Jens
      wrote on last edited by
      #2

      You simply need to create a spacer item. If there are no expanding spacer items in your layout, it will distribute equal size to all of them. Since you want to keep your tool buttons from growing (it is not the spacing that is the issue it is the fact that buttons are stretched) You need to add an expanding item to your layout. You can do it by adding this
      @
      Item { Layout.fillWidth: true ; height: 1 }
      @
      Between the last tool button and the text label

      1 Reply Last reply
      0
      • D Offline
        D Offline
        Dmitry.Sokolov
        wrote on last edited by
        #3

        Cool!
        I added anchors.left and leftMargin for each button.
        Your method is much shorter.

        Thanks!

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved