QML布局

一、‌锚点布局（Anchors）

通过定义元素与其他元素或父容器的锚点关系实现定位，支持动态调整和边距控制‌。
```
Rectangle {anchors.left: parent.left   // 左对齐父容器anchors.top: parent.top     // 顶部对齐父容器anchors.margins: 10        // 统一设置四周边距width: 100; height: 50
}
```
- ‌关键属性‌：anchors.left、anchors.right、anchors.fill（填充父容器）、anchors.centerIn（居中）‌。
- ‌边距控制‌：anchors.margins（统一边距）或单独设置anchors.leftMargin等‌。

二、水平布局（Row）

Row定位器将子元素水平排列。你可以通过spacing属性来设置子元素之间的间距。主要属性：

基本属性

属性	类型	默认值	描述
`spacing`	real	0	子元素之间的间距（像素）
`layoutDirection`	enumeration	Qt.LeftToRight	布局方向（LeftToRight/RightToLeft）
`add`	Transition	-	添加子项时应用的过渡动画
`move`	Transition	-	移动子项时应用的过渡动画
`populate`	Transition	-	初始创建子项时应用的过渡动画

对齐属性

属性	类型	默认值	描述
`topPadding`	real	0	顶部内边距
`bottomPadding`	real	0	底部内边距
`leftPadding`	real	0	左侧内边距
`rightPadding`	real	0	右侧内边距
`padding`	real	0	统一设置所有内边距
`verticalAlignment`	enumeration	Row.AlignTop	垂直对齐方式（AlignTop/AlignVCenter/AlignBottom）
`horizontalAlignment`	enumeration	Row.AlignLeft	水平对齐方式（AlignLeft/AlignHCenter/AlignRight）

布局控制属性

属性	类型	默认值	描述
`width`	real	隐含宽度	行宽度（若未设置则为子项总宽度）
`height`	real	隐含高度	行高度（若未设置则为最高子项高度）
`clip`	bool	false	是否裁剪超出边界的内容

枚举值说明

layoutDirection:

Qt.LeftToRight - 从左到右排列（默认）
Qt.RightToLeft - 从右到左排列

verticalAlignment:

Row.AlignTop - 顶部对齐
Row.AlignVCenter - 垂直居中
Row.AlignBottom - 底部对齐

horizontalAlignment:

Row.AlignLeft - 左对齐
Row.AlignHCenter - 水平居中
Row.AlignRight - 右对齐

示例代码：

    Row {spacing: 10Rectangle { width: 100; height: 50; color: "red" }Rectangle { width: 100; height: 50; color: "green" }Rectangle { width: 100; height: 50; color: "blue" }}

Row 是创建水平排列布局的基础组件，适合简单的水平排列需求，对于更复杂的响应式布局，建议使用 RowLayout 或 GridLayout。

三、RowLayout

RowLayout 是 Qt Quick Layouts 模块提供的布局组件，用于创建灵活的水平布局。相比基础的 Row，它提供了更强大的布局控制能力。

基本用法

qml

import QtQuick 2.15
import QtQuick.Layouts 1.15RowLayout {id: layoutanchors.fill: parentspacing: 10  // 子项之间的间距Rectangle {color: "red"Layout.preferredWidth: 100Layout.fillHeight: true}Rectangle {color: "green"Layout.fillWidth: true  // 填充可用宽度Layout.minimumWidth: 50Layout.maximumWidth: 200}Rectangle {color: "blue"Layout.preferredWidth: 150Layout.preferredHeight: 80}
}

主要特性

RowLayout 容器属性

属性	类型	默认值	说明
`spacing`	`real`	`5`	子项之间的统一间距（像素）
`layoutDirection`	`enum`	`Qt.LeftToRight`	排列方向（`Qt.LeftToRight` 或 `Qt.RightToLeft`）
`enabled`	`bool`	`true`	是否启用布局（禁用时子项不可见/不响应）

子项布局属性（需在子元素内使用）

1. 尺寸控制

属性	类型	说明
`Layout.fillWidth`	`bool`	是否水平填充剩余空间
`Layout.fillHeight`	`bool`	是否垂直填充剩余空间
`Layout.preferredWidth`	`real`	首选宽度（优先级高于隐式宽度）
`Layout.preferredHeight`	`real`	首选高度
`Layout.minimumWidth`	`real`	最小宽度限制