Проблемы с QML Gridlayout - PullRequest
Новая
       20

Проблемы с QML Gridlayout

0 голосов
/ 30 января 2019

Я хочу сделать макет экрана прототипа, используя QML и GridLayout.Я не могу заставить его работать.Я следовал за многими предыдущими примерами здесь на Stackoverflow, но ничего не работает удовлетворительно, и ясно, что я не понимаю макеты QML и нуждаюсь в некоторой помощи.(DevEnv: Centos 7.5, Qt 5.11 / QtCreator 4.7.1)

Я хочу добиться этой компоновки экрана (игнорировать цвета)

Desired Layout

Пример 1 

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3


ApplicationWindow {
    visible: true
    visibility: "Maximized"
    title: 'Title'

    GridLayout {
        id: mainLayout
        anchors.fill: parent

        rows: 8
        columns: 12

        Rectangle {
            id: view_A
            color: "lightgreen"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 11
            Layout.rowSpan: 1
            Layout.row: 1
            Layout.column: 1
            Text { text: "view_A" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_B
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 5
            Layout.rowSpan: 3
            Layout.row: 2
            Layout.column: 1
            Text { text: "view_B"; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_C
            color: "blue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 4
            Layout.rowSpan: 3
            Layout.row: 2
            Layout.column: 6
            Text { text: "view_C" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_D
            color: "blueviolet"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 5
            Layout.row: 2
            Layout.column: 10
            Text { text: "view_D" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_E
            color: "lightblue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 3
            Layout.rowSpan: 4
            Layout.row: 5
            Layout.column: 1
            Text { text: "view_E" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_F
            color: "darkorange"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 6
            Layout.rowSpan: 4
            Layout.row: 5
            Layout.column: 4
            Text { text: "view_F" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_G
            color: "seagreen"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 2
            Layout.row: 7
            Layout.column: 10
            Text { text: "view_G" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_H
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 8
            Layout.row: 1
            Layout.column: 12
            Text { text: "view_H" ; anchors.centerIn: parent }
        }
    }
}

Это решение близко, однако элементы сетки не соответствуют указанным размерам.Например, верхний элемент id: view_A намного выше желаемого, как и ширина id: view_H.(Снимок экрана с результатами выполнения кода QML в примере 1)

Failed Element Sizes Example 1

Пример 2:

Затем я попыталсярешение, представленное здесь ( Как я могу создать QML GridLayout с элементами пропорциональных размеров? ).Это подошло как можно ближе, но между некоторыми элементами есть ужасные места.

// QML Code Example 2

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3


ApplicationWindow {
    visible: true
    visibility: "Maximized"
    title: 'Title'

    GridLayout {
        id: grid
        anchors.fill: parent
        rowSpacing: 0
        columnSpacing: 0

        rows: 8
        columns: 12

        property double colMultiplier: grid.width / grid.columns
        property double rowMultiplier: grid.height / grid.rows;
        function getElementHeight(element) {
            return element.Layout.rowSpan * rowMultiplier
        }
        function getElementWidth(element) {
            return element.Layout.columnSpan * colMultiplier
        }

        Rectangle {
            id: view_A
            color: "lightgreen"
            Layout.columnSpan: 11
            Layout.rowSpan: 1
            Layout.row: 1
            Layout.column: 1
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_A" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_B
            color: "yellow"
            Layout.columnSpan: 5
            Layout.rowSpan: 3
            Layout.row: 2
            Layout.column: 1
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_B"; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_C
            color: "blue"
            Layout.columnSpan: 4
            Layout.rowSpan: 3
            Layout.row: 2
            Layout.column: 6
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_C" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_D
            color: "blueviolet"
            Layout.columnSpan: 2
            Layout.rowSpan: 5
            Layout.row: 2
            Layout.column: 10
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_D" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_E
            color: "lightblue"
            Layout.columnSpan: 3
            Layout.rowSpan: 4
            Layout.row: 5
            Layout.column: 1
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_E" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_F
            color: "darkorange"
            Layout.columnSpan: 6
            Layout.rowSpan: 4
            Layout.row: 5
            Layout.column: 4
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_F" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_G
            color: "seagreen"
            Layout.columnSpan: 2
            Layout.rowSpan: 2
            Layout.row: 7
            Layout.column: 10
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_G" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_H
            color: "yellow"
            Layout.columnSpan: 1
            Layout.rowSpan: 8
            Layout.row: 1
            Layout.column: 12
            Layout.preferredHeight: grid.getElementHeight(this)
            Layout.preferredWidth:  grid.getElementWidth(this)
            Text { text: "view_H" ; anchors.centerIn: parent }
        }
    }
}

Example 2 Failure

Таким образом, как можно видеть из полученного снимка экрана, есть промежутки между некоторыми элементами, которые выглядят ужасно.

Так что, если есть какие-либо эксперты QML, которые могут помочь решить эту проблему, я бы очень хотел услышать от вас.

С уважением ...

1 Ответ

0 голосов
/ 18 февраля 2019

Вы можете добавить Layout.preferedWidth и Layout.preferedHeight, чтобы исправить это 

GridLayout {
        id: mainLayout
        anchors.fill: parent

        rows: 8
        columns: 12

        Rectangle {
            id: view_A
            color: "lightgreen"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 11
            Layout.rowSpan: 1
            Layout.preferredWidth: 11
            Layout.preferredHeight: 1
            Layout.row: 1
            Layout.column: 1
            Text { text: "view_A" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_B
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 5
            Layout.rowSpan: 3
            Layout.preferredWidth: 5
            Layout.preferredHeight: 3
            Layout.row: 2
            Layout.column: 1
            Text { text: "view_B"; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_C
            color: "blue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 4
            Layout.rowSpan: 3
            Layout.preferredWidth: 4
            Layout.preferredHeight: 3
            Layout.row: 2
            Layout.column: 6
            Text { text: "view_C" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_D
            color: "blueviolet"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 5
            Layout.preferredWidth: 2
            Layout.preferredHeight: 5
            Layout.row: 2
            Layout.column: 10
            Text { text: "view_D" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_E
            color: "lightblue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 3
            Layout.rowSpan: 4
            Layout.preferredWidth: 3
            Layout.preferredHeight: 4
            Layout.row: 5
            Layout.column: 1
            Text { text: "view_E" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_F
            color: "darkorange"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 6
            Layout.rowSpan: 4
            Layout.preferredWidth: 6
            Layout.preferredHeight: 4
            Layout.row: 5
            Layout.column: 4
            Text { text: "view_F" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_G
            color: "seagreen"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 2
            Layout.preferredWidth: 2
            Layout.preferredHeight: 2
            Layout.row: 7
            Layout.column: 10
            Text { text: "view_G" ; anchors.centerIn: parent }
        }

        Rectangle {
            id: view_H
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 8
            Layout.preferredWidth: 1
            Layout.preferredHeight: 8
            Layout.row: 1
            Layout.column: 12
            Text { text: "view_H" ; anchors.centerIn: parent }
        }
    }

Результат:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...