Qt Quick 04｜QML 四大布局：Row、Column、Grid、Anchor 锚点布局

正文

QML 放弃固定坐标定位，提供四类主流布局，实现界面自适应，窗口缩放自动适配。

一、Column 列布局（垂直排列，自上而下）

子元素垂直排布，对应 QWidget 的QVBoxLayout。

qml

Column { anchors.centerIn: parent spacing: 8 // 元素之间间距 Button { text: "按钮1"; width: 100 } Button { text: "按钮2"; width: 100 } Button { text: "按钮3"; width: 100 } }

二、Row 行布局（水平排列，从左到右）

子元素水平排布，对应 QWidget 的QHBoxLayout。

qml

Row { anchors.top: parent.top anchors.left: parent.left spacing: 10 Text { text: "账号：" } TextField { width: 120 } }

三、Grid 网格布局（多行多列表格排布）

适合表单、九宫格布局，对应 QWidget 的QGridLayout。

核心属性：columns指定列数。

qml

Grid { anchors.centerIn: parent columns: 2 // 固定2列 spacing: 15 Text { text: "姓名：" } TextField { width: 120 } Text { text: "年龄：" } TextField { width: 120 } }

四、Anchor 锚点布局（QML 最强布局，万能定位）

锚点是 QML 特有布局方式，通过上下左右、居中、边距描述元素相对位置，灵活度最高。

1. 基础锚点用法

qml

Rectangle { width: 300 height: 200 color: "#f5f5f5" // 子元素：水平居中、垂直居中 Rectangle { width: 100 height: 60 color: "lightblue" anchors.centerIn: parent } }

2. 单侧锚点 + 边距

qml

Rectangle { // 贴父容器左侧、顶部，距离边距20px anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 20 anchors.topMargin: 20 }

3. 左右拉伸（填满父容器）

qml

Rectangle { anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top height: 40 }

五、布局选型建议

1. 简单水平排列 →Row
2. 简单垂直排列 →Column
3. 表单、九宫格 →Grid
4. 复杂不规则界面、精准相对定位 →Anchor 锚点（首选）

小结

Row/Column/Grid 上手简单，适合规整界面；Anchor 灵活强大，是 QML 布局的核心，复杂界面优先使用锚点。