QML布局

一、‌锚点布局（Anchors）

1.  通过定义元素与其他元素或父容器的锚点关系实现定位，支持动态调整和边距控制‌。

   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: 10
        Rectangle { 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.15

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 10  // 子项之间的间距
    
    Rectangle {
        color: "red"
        Layout.preferredWidth: 100
        Layout.fillHeight: true
    }
    
    Rectangle {
        color: "green"
        Layout.fillWidth: true  // 填充可用宽度
        Layout.minimumWidth: 50
        Layout.maximumWidth: 200
    }
    
    Rectangle {
        color: "blue"
        Layout.preferredWidth: 150
        Layout.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	最小宽度限制