如何使用比例大小的项目创建QML GridLayout？-Java 学习之路

我一直在尝试使用跨越可变数量的行和列的项创建QML布局 . 因此，例如，一个跨越两行四列的矩形，其中一个跨越一行和两列，另一个跨越三行和五列 . 创建此的一般尝试如下：

import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    GridLayout {
        anchors.fill: parent

        columns: 5
        rows: 2

        Rectangle {
            Layout.column: 0
            Layout.columnSpan: 4
            Layout.row: 0
            Layout.rowSpan: 2

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "red"
        }

        Rectangle {
            Layout.column: 4
            Layout.columnSpan: 1
            Layout.row: 0
            Layout.rowSpan: 2

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "green"
        }

        Rectangle {
            Layout.column: 0
            Layout.columnSpan: 5
            Layout.row: 2
            Layout.rowSpan: 3

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "blue"
        }
    }
}

结果如下：

Attempt at weighted grid layout

如您所见，Layout.rowSpan和Layout.columnspan似乎不起作用 . 相反，前两行似乎占1：1而不是4：1，而顶部与底部相比是1：1而不是2：3 . 我怀疑这与Layout.fillHeight和Layout.fillWidth有关 . The documentation州：

如果此属性为true，则项目将尽可能宽，同时遵守给定的约束 .

但我不确定在这种情况下“给定的约束”是什么 . 我原本希望它包括行和列 Span ，但似乎没有 .

我可能直接计算项目的宽度和高度（或者可能是Layout.preferredWidth和Layout.preferredHeight），但这似乎使Layout.rowSpan和Layout.columnSpan完全是多余的 . 有没有办法根据网格行和列自动计算高度？

1 回答

我遇到了和你一样的问题，但我认为很容易误解GridLayout正在做什么 . 如果你有5列2行的网格，你会得到类似这样的东西，其中每个 O 代表一个单元格：

grid
OOOOO
OOOOO

rowSpan 确定对象是如何 TALL 的 .

columnSpan 确定对象是如何 WIDE 的 .

你想要在这个网格中适应这些：

r1      r2     r3
OOOO    OO   OOOOO
OOOO         OOOOO
             OOOOO

不难看出，但它们不合适 .

这是我对12x12网格的解决方案，应该很容易理解 . GridLayout似乎不会自动知道要为其子项分配的宽度和高度 . 但是没关系，你可以轻松定义 . 基本上，我将矩形传递给我的两个短两个函数 . 您可以传递rowSpan或columnSpan，但我更喜欢这种方式，因为我不必记住哪个函数采用了什么：

GridLayout {
    id : grid
    anchors.fill: parent
    rows    : 12
    columns : 12
    property double colMulti : grid.width / grid.columns
    property double rowMulti : grid.height / grid.rows
    function prefWidth(item){
        return colMulti * item.Layout.columnSpan
    }
    function prefHeight(item){
        return rowMulti * item.Layout.rowSpan
    }

    Rectangle {
        color : 'red'
        Layout.rowSpan   : 10
        Layout.columnSpan: 2
        Layout.preferredWidth  : grid.prefWidth(this)
        Layout.preferredHeight : grid.prefHeight(this)
    }
    Rectangle {
        color : 'yellow'
        Layout.rowSpan   : 10
        Layout.columnSpan: 10
        Layout.preferredWidth  : grid.prefWidth(this)
        Layout.preferredHeight : grid.prefHeight(this)
    }
    Rectangle {
        id : greenRect
        color : 'green'
        Layout.rowSpan : 2
        Layout.columnSpan : 12
        Layout.preferredWidth  : grid.prefWidth(this)
        Layout.preferredHeight : grid.prefHeight(this)
    }
}

结果在这里：

QML Grid Layout

回复于 2024-05-16T06:47:40+08:00

如何使用比例大小的项目创建QML GridLayout？

1 回答

相关问题