Jeyanth Inba
Jeyanth Inba

Reputation: 23

Adjust vertical spacing in Flow in QML

I can adjust the horizontal spacing of elements inside a flow in QML, But i cannot adjust vertical spacing between elements

Suggest a way to adjust vertical spacing in QML

Vertical spacing in FLOW in QML

Is it possible to adjust vertical spacing?

CODE:

   Flow {
        id: FlowId
        width: 540
        spacing: 0
        Repeater {
            id: repeaterForButtons
            model:Model

            Button {
              id: rutton

              contentItem: Text {
                 text: text
                 font.pixelSize: 14
                 opacity: enabled ? 1.0 : 0.3
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 elide: Text.ElideRight
               }

                background: Rectangle {
                  opacity: enabled ? 1 : 0.3
                  border.width: 1
                  radius: 2
               }
     }

OUTPUT:

enter image description here

Upvotes: 0

Views: 85

Answers (3)

john_d
john_d

Reputation: 11

If you want to adjust vertical gap in Flow, you can wrap your Button by Item:

Item {
    height: yourButton.height + gapYouWantToSet
    width: yourButton.width

    Button {
        id: yourButton
    }
}

Upvotes: 1

Jeyanth Inba
Jeyanth Inba

Reputation: 23

Adding the below in the Rectangle object solves the issue

        background: Rectangle {
          ***anchors.fill: parent***
          opacity: enabled ? 1 : 0.3
          border.width: 1
          radius: 2
       }

Upvotes: 0

Stephen Quan
Stephen Quan

Reputation: 25871

When I run a version of your code, I do not see the gap:

    Flow {
        width: 540
        spacing: 0
        Repeater {
            model: "The quick brown fox jumped over the lazy dog".split(/ /)
            delegate: Button {           
                width: 180
                text: modelData
            }
        }
    }

You can Try it Online

Upvotes: 1

Related Questions