Quick QML - QML 布局：掌握 Row、Column、Grid、Flow 和嵌套布局

Quick QML - QML 布局：掌握 Row、Column、Grid、Flow 和嵌套布局

QML 是一种用于构建用户界面的声明性语言，具有易于学习和可读性良好的特点。在 QML 中，可以使用不同的布局方式来组织界面元素，而不必直接指定它们的位置和大小。

本文将重点介绍 QML 中五种常见的布局方式：Row、Column、Grid、Flow 和嵌套布局。

1. Row 和 Column 布局

Row 和 Column 布局是最基本的布局方式，用于按水平或垂直方向依次排列子元素。

示例代码：

import QtQuick 2.0

Rectangle {
    width: 400
    height: 200

    Row {
        spacing: 10 // 元素之间的距离
        anchors.centerIn: parent // 居中

        Rectangle {
            width: 50
            height: 50
            color: "red"
        }

        Rectangle {
            width: 50
            height: 50
            color: "green"
        }

        Rectangle {
            width: 50
            height: 50
            color: "blue"
        }
    }
}

上述代码创建了一个宽度为 400、高度为 200 的矩形，并在其中创建了一个横向排列的 Row 布局。 Row 布局包含三个子元素，它们之间的间距为 10，居中显示。</