Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

qt - How to give specific spacing to items in a QML layout?

I have a ColumnLayout, which has its anchor set to anchor.fill: parent, therefore it has already a set dimension, which depends on its parent dimension.

How can I add Rectangles into this ColumnLayout, with a specific spacing from top to bottom?

Right now I have this:

ColumnLayout {
  anchors.fill: parent
  spacing: 2

  Rectangle {
    height: 50
    width: 50
    color: "red"
  }
  Rectangle {
    height: 50
    width: 50
    color: "green"
  }
  Rectangle {
    height: 50
    width: 50
    color: "blue"
  }
}

But instead of having the rectangles from top to bottom with a spacing 2 it layouts the Rectangles evenly in the ColumnLayout.

One solution would be to anchor the first rectangle to the parent's top and the anchor the rest of the rectangles one after the other, but I would like to avoid this if possible.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Differently from previous positioners, such as Column or Row, layouts were introduced to support graphical scaling of UI, also by filling available space (in this specific case fill their parent). In that sense the spacing property should not be seen as a strict upper bound to the spacing between Items but as the minimum allowed distance between them.

The current approach to solve your issue is to use a "filler" Item, which uses the fillHeight property. This Item occupies all the space left by the other Items inside the layout thus packing them together, as needed:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true

    width: 100
    height: 200

    ColumnLayout {
        anchors.fill: parent
        spacing: 2

        Rectangle {
            height: 50
            width: 50
            color: "red"
        }
        Rectangle {
            height: 50
            width: 50
            color: "green"
        }
        Rectangle {
            height: 50
            width: 50
            color: "blue"
        }
        Item { Layout.fillHeight: true }    // <-- filler here
    }
}

Note that you can exploit the same approach and add a filler at the beginning of the layout to vertically center the children Items. Finally, note that in this case it would be advisable to use a Column which lays down the Items correctly as expected, disregarding the available space left.

Just make your choice.


It should be noted that while this approach works Layouts provide a lot of properties to control the size of the Items. Please refer to the other answer for some insight on the subject.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...