Поля макета QtQuick

Есть ли способ удалить начальные и конечные поля в компонентах макета QML?

Вот пример ColumnLayout с парой дочерних элементов. Вопрос в том, как удалить эти верхние и нижние поля и перераспределить все дочерние элементы по всей высоте родительского макета.

Поля

ColumnLayout {
    id: dotColumn
    anchors.horizontalCenter: bg.horizontalCenter
    height: root.height
    Repeater {
        id: repeater
        model: root.model

        Item {
            id: activeDot_container

            property int radius: 15
            width: radius * 2
            height: radius * 2

            Rectangle {
                anchors.centerIn: parent
                radius: parent.radius

                width: radius * 2
                height: radius * 2

                color: Palette.colors['deepPurple']['500']
            }
        }
    }
}

layout qt qml qtquick2 qt-quick
person gmlt.A    schedule 26.12.2016    source источник
comment
Хорошо, вы должны показать нам свой код, по крайней мере, чтобы мы могли вам помочь.   -  person folibis    schedule 26.12.2016
comment
@folibis мой плохой. Код прилагается.   -  person gmlt.A    schedule 26.12.2016
comment
Ваш код неполный, поэтому я могу только предположить, как это решить. Попробуйте добавить Layout.alignment: Qt.AlignTop к элементу activeDot_container.   -  person folibis    schedule 26.12.2016
comment
@folibis, но таким образом я могу получить еще большую маржу внизу столбца ...   -  person gmlt.A    schedule 26.12.2016

Ответы (2)


arrow_upward
1
arrow_downward

После нескольких экспериментов с позиционированием макета я пришел к следующему решению.

Предполагая, что поля, которые я хочу исключить, имеют размер половины интервала между дочерними элементами макета, мы можем установить отрицательные поля в начале и конце компонента макета, растягивая его до тех пор, пока первый и последний дочерние элементы не выровняются в начале/конце макета.

Функция, которую я использовал для расчета маржи:

function getMargin() {
  var height = root.height;
  var spacing = (height - root.radius * 2 * model.length) / model.length;
  return spacing / 2;
}

Где root является родителем компонента макета, root.radius*2 представляет размер дочернего элемента макета и может быть заменен другим дочерним измерением, а model.length обозначает количество дочерних элементов.

Затем мы можем просто установить привязки для компонента Layout и установить соответствующие поля.

ColumnLayout {
    anchors.top: root.top
    anchors.bottom: root.bottom
    anchors.topMargin: -1 * getMargin()
    anchors.bottomMargin: -1 * getMargin()
    Repeater {
        model: root.model
        Item {
            property int radius: root.radius
            width: radius * 2
            height: radius * 2
            /* more code */
        }
    }
}

P.S. То же решение можно применить к RowLayout, заменив верхнюю/нижнюю привязку макета левой/правой.

person gmlt.A    schedule 26.12.2016

arrow_upward
0
arrow_downward

Вы не можете выровнять элемент внутри макета как по верхнему, так и по нижнему краю. В качестве обходного пути вы можете поместить элемент с переменной y внутрь контейнера, как показано ниже:

Window {
    visible: true
    visibility: Window.Maximized

    ColumnLayout {
        anchors.horizontalCenter: parent.horizontalCenter
        height: parent.height
        spacing:1
        Repeater {
            id: repeater
            model: 10
            Rectangle {
                color: "green"
                property int radius: 15
                width: radius
                Layout.fillHeight: true
                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    y: index * (parent.height - height) / (repeater.count - 1)
                    radius: parent.radius
                    width: radius * 2
                    height: radius * 2
                    color: "blue"
                }
            }
        }
    }
}
person folibis    schedule 26.12.2016