4. 使用Row和Column布局

任务目标

在QML中，Row和Column是两种最基础的定位型布局器，分别将子项沿水平方向和垂直方向依次排列。本案例将创建一个包含文本、输入框和按钮的登录表单，使用Column垂直排列标签与输入框，再使用Row将两个按钮水平并排，并演示如何通过spacing属性精确控制子项间距。

环境依赖

需要Qt 5.15或更高版本（或Qt 6.x），以及Qt Quick模块。无需额外安装第三方库。

完整实现

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 320
    height: 240
    title: "Row and Column Layout"

    // 外层使用Column垂直排列两个分组
    Column {
        anchors.centerIn: parent
        spacing: 20          // 两个分组之间的垂直间距

        // 第一组：用户名输入（Column垂直排列）
        Column {
            spacing: 8        // 标签与输入框之间的间距
            Text {
                text: "用户名"
                font.pixelSize: 14
            }
            TextField {
                id: userInput
                width: 180
                placeholderText: "请输入用户名"
            }
        }

        // 第二组：密码输入（Column垂直排列）
        Column {
            spacing: 8
            Text {
                text: "密码"
                font.pixelSize: 14
            }
            TextField {
                id: passInput
                width: 180
                echoMode: TextInput.Password
                placeholderText: "请输入密码"
            }
        }

        // 按钮组：使用Row水平排列两个按钮
        Row {
            spacing: 12       // 两个按钮之间的水平间距
            anchors.horizontalCenter: parent.horizontalCenter

            Button {
                text: "登录"
                onClicked: {
                    // 仅演示布局，不做实际登录逻辑
                    console.log("点击登录")
                }
            }

            Button {
                text: "取消"
                onClicked: {
                    userInput.text = ""
                    passInput.text = ""
                }
            }
        }
    }
}

运行方式

1. 将上述代码保存为 main.qml。
2. 在项目文件（.pro）中确保包含 QT += quick quickcontrols2，并添加 QML_IMPORT_PATH 指向Qt Quick Controls 2模块。
3. 使用 qmlscene main.qml 或通过Qt Creator直接运行该QML文件。

验证方法

• 窗口打开后，观察“用户名”和“密码”两组控件均垂直排列，且每组内标签与输入框间距一致（8像素）。
• 两组之间垂直间距为20像素，明显大于组内间距。
• 底部“登录”和“取消”按钮水平并排，间距为12像素，且整体水平居中于窗口。
• 点击“取消”按钮，两个输入框内容被清空，证明按钮事件绑定正确。

关键点说明

• Row和Column的spacing属性控制相邻子项间距，单位为像素。
• 若需让某个子项在剩余空间中居中或对齐，可配合anchors或Layout附加属性使用。
• 当子项宽度不固定时，Row默认按子项隐式宽度排列；Column默认按子项隐式高度排列。