Полета на оформлението на QtQuick

Има ли някакъв начин за премахване на начални и крайни полета в компонентите на QML Layout?

Ето пример за 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 е родител на компонента Layout, 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