QML网格布局问题

时间：2019-01-30 00:53:21

标签： qt qml grid-layout

我希望使用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的宽度也高。 （示例1 QML代码执行结果的屏幕截图）

Failed Element Sizes Example 1

示例2：

然后，我尝试了此处提供的解决方案（How can I create a QML GridLayout with items of proportionate sizes?）。 这已经尽我所能了，但是某些元素之间有难看的空间。 

// 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

因此在最终的屏幕截图中可以看到，ther是看起来很糟糕的某些元素之间的空格。

因此，如果有任何QML专家可以帮助解决此问题，我真的很想听听您的意见。

亲切的问候...

1 个答案:

答案 0 :(得分：0)

您可以添加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

相关问题
最新问题