4. 使用Row和Column布局

任务目标

使用QML中的Row和Column类型，将多个控件分别进行水平与垂直排列，并演示如何设置子项之间的间距（spacing）以及整体对齐方式（layoutDirection、horizontalAlignment、verticalAlignment）。

实现方案

创建一个QML文件，在Window中放置一个Column作为顶层布局，内部包含两个Row。第一个Row演示水平排列与间距设置；第二个Row演示垂直方向的对齐方式。每个子项使用带背景色的Rectangle以便直观观察布局效果。

完整代码

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 400
    height: 300
    visible: true
    title: "Row and Column Layout"

    // 顶层使用Column，垂直排列两个子布局
    Column {
        anchors.centerIn: parent
        spacing: 20   // 两个Row之间的垂直间距

        // 第一个Row：水平排列，设置间距
        Row {
            spacing: 10   // 子项之间的水平间距
            layoutDirection: Qt.LeftToRight  // 从左到右排列

            Rectangle { width: 60; height: 40; color: "lightcoral" }
            Rectangle { width: 60; height: 40; color: "lightblue" }
            Rectangle { width: 60; height: 40; color: "lightgreen" }
        }

        // 第二个Row：演示垂直对齐方式
        Row {
            spacing: 5
            // 子项高度不同，观察verticalAlignment效果
            verticalAlignment: Qt.AlignVCenter  // 垂直居中对齐

            Rectangle { width: 50; height: 60; color: "gold" }
            Rectangle { width: 50; height: 30; color: "tomato" }
            Rectangle { width: 50; height: 45; color: "mediumpurple" }
        }
    }
}

运行方式

1. 将上述代码保存为main.qml。
2. 在Qt Creator中新建Qt Quick Application项目，替换生成的main.qml内容，或直接使用qmlscene main.qml命令运行（需安装Qt 5.15+）。
3. 确保项目配置了Qt Quick模块（默认已包含）。

验证方法

• 窗口显示后，第一行三个矩形水平排列，矩形之间间隔10像素，整体位于窗口中央。
• 第二行三个矩形高度不同，但它们的垂直中心对齐（AlignVCenter），且彼此间距5像素。
• 两个Row之间间隔20像素，整体垂直居中于窗口。
• 修改spacing或verticalAlignment的值并重新运行，观察布局变化，确认属性生效。

关键说明

• Row默认水平排列子项，Column默认垂直排列；两者均继承自Positioner，支持spacing和layoutDirection。
• 对齐属性horizontalAlignment和verticalAlignment仅在子项尺寸小于布局可用空间时生效；本例中Row宽度由子项总宽决定，因此水平对齐不明显，垂直对齐因子项高度不同而可见。
• 若需让Row占满父容器宽度以观察水平对齐，可设置width: parent.width，但本例聚焦基本排列与间距，故未扩展。