Qml GridLayout как указать ширину столбца? - PullRequest
Новая
       54

Qml GridLayout как указать ширину столбца?

0 голосов
/ 05 ноября 2018

У меня есть столбец с двумя groupbox, каждый из которых имеет GridLayout.

Вот мой код: 

 Window {
    visible: true
    width: 500
    height: 480
    title: qsTr("GridLayoutTest")
Column
{
    GroupBox
    {
        contentWidth: gl1_.width
        contentHeight: gl1_.height
            GridLayout
            {
                id: gl1_
                columns: 2
                width: 200
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 45; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 50; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 45; Layout.preferredHeight: 25; color: "purple"; }
            }
    }
    GroupBox
    {
        contentWidth: gl2_.width
        contentHeight: gl2_.height
            GridLayout
            {
                id: gl2_
                columns: 2
                width: 200
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 35; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
                Rectangle { Layout.preferredWidth: 60; Layout.preferredHeight: 25; color: "purple"; }
            }
    }
}

}

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

Результат:

Это способ сделать это?

1 Ответ

0 голосов
/ 06 ноября 2018

Хорошо, у вас есть проблемы с размерами. Вы определяете ширину GridLayout как 200px, но также определяете размеры для элементов, например, идентификатор первой строки 60 + 25 = 85, а не 200. Таким образом, макет должен как-то это исправить. Я думаю, он растягивает клетки в зависимости от размеров предметов.

Таким образом, вы должны установить фиксированный размер для первого столбца для всех макетов. Оставшееся место во втором столбце вы можете обернуть с помощью элемента: 

Column {
    anchors.fill: parent
    anchors.margins: 20
    GroupBox {
        id: box1
        title: "group 1"
        width: parent.width
        GridLayout {
            width: parent.width
            columns: 2
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 180 }
            }
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 60 }
            }
        }
    }
    GroupBox {
        id: box2
        title: "group 2"
        width: parent.width
        GridLayout {
            width: parent.width
            columns: 2
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 80 }
            }
            Rectangle { implicitHeight: 40; color: "orange"; Layout.preferredWidth: 250 }
            Item {
                Layout.fillWidth: true
                implicitHeight: 40;
                Rectangle { implicitHeight: 40; color: "lightgreen"; implicitWidth: 120 }
            }
        }
    }
}
...