在QML开发中，手动定位元素易出现窗口大小变化时布局错乱的问题，而布局管理器能自动排列、调整元素的位置与大小，是实现响应式界面的核心工具。它们主要位于QtQuick.Layouts模块，基于Item组件扩展，为界面提供智能排列能力。
ColumnLayout将子元素从上到下垂直排列，支持设置元素间距和整体对齐方式，是构建垂直结构界面的基础。
核心属性：spacing控制元素间垂直间距，layoutDirection调整排列方向，alignment设置整体对齐规则。
适用场景：设置页面、垂直列表表单、垂直工具栏等。
import QtQuick 2.15
import QtQuick.Layouts 1.15
ColumnLayout {
spacing: 10 // 元素间垂直间距10px
anchors.centerIn: parent // 布局在父容器中居中
Rectangle { color: "tomato"; Layout.preferredWidth: 200; Layout.preferredHeight: 60 }
Rectangle { color: "gold"; Layout.preferredWidth: 200; Layout.preferredHeight: 60 }
Rectangle { color: "lightseagreen"; Layout.preferredWidth: 200; Layout.preferredHeight: 60 }
}
RowLayout与ColumnLayout逻辑类似，将子元素从左到右（或从右到左）水平排列，支持间距和对齐设置。
核心属性：spacing控制水平间距，layoutDirection可设为Qt.LeftToRight或Qt.RightToLeft调整排列方向。
适用场景：水平工具栏、按钮组、状态栏等。
RowLayout {
anchors.centerIn: parent
spacing: 15 // 元素间水平间距15px
Button { text: "确定"; Layout.fillWidth: true } // 填充可用宽度，窗口拉伸时自适应
Button { text: "取消"; Layout.fillWidth: true }
Button { text: "帮助"; Layout.fillWidth: true }
}
GridLayout将元素排列在二维网格中，功能灵活，支持自定义行列数、间距，以及元素跨行跨列。
你可以通过rows、columns显式设置行列数；rowSpacing、columnSpacing分别控制行、列间距；flow属性定义元素填充方向。子元素可通过Layout.row、Layout.column指定网格位置，Layout.rowSpan、Layout.columnSpan实现跨行跨列布局。
适用场景：复杂表单、仪表盘、数据表格等。
GridLayout {
columns: 3 // 固定3列
rowSpacing: 10 // 行间距10px
columnSpacing: 10 // 列间距10px
Label { text: "姓名:" }
TextField { Layout.columnSpan: 2; Layout.fillWidth: true } // 跨2列并填充宽度
Label { text: "邮箱:" }
TextField { Layout.columnSpan: 2; Layout.fillWidth: true }
CheckBox { text: "记住我"; Layout.columnSpan: 3 } // 跨3列显示
}
Anchor布局通过定义元素间的相对锚点关系定位，逻辑直观，适合构建元素间有明确相对位置的界面。
常用锚点：anchors.left、anchors.right、anchors.top、anchors.bottom、anchors.verticalCenter等，还可通过margins设置锚点边距。
适用场景：固定相对位置的组件组合、侧边栏布局等。
Rectangle {
id: container
width: 300; height: 200
Rectangle {
id: rect1
color: "lightblue"
anchors {
left: parent.left; top: parent.top
bottom: parent.bottom; margins: 10 // 与父容器留10px边距
}
width: 100
}
Rectangle {
id: rect2
color: "lightgreen"
anchors {
left: rect1.right; top: parent.top
right: parent.right; bottom: parent.bottom
margins: 10
}
}
}
StackLayout类似卡片堆叠，同一时间仅显示一个子元素，通过切换currentIndex控制显示内容，是实现多页面切换的高效方式。
核心属性：currentIndex，设置对应子元素索引即可切换显示。
适用场景：向导页面、标签页、卡片式内容切换等。
StackLayout {
id: stack
anchors.fill: parent
currentIndex: tabBar.currentIndex // 绑定TabBar选中索引，实现标签切换
Page1 { } // 自定义页面组件
Page2 { }
Page3 { }
}
TabBar {
id: tabBar
TabButton { text: "页面一" }
TabButton { text: "页面二" }
TabButton { text: "页面三" }
}
通过属性绑定、状态切换和动态元素操作，可实现布局动态变化，提升用户体验。
将布局属性与数据或条件绑定，让布局随业务逻辑自动调整：
ColumnLayout {
spacing: model.isSpecial ? 20 : 5 // 根据数据模型动态调整垂直间距
}
通过状态定义布局的不同形态，配合过渡动画实现平滑切换：
Rectangle {
id: dynamicRect
width: 100; height: 100; color: "orange"
states: [
State {
name: "expanded"
PropertyChanges { target: dynamicRect; Layout.preferredWidth: 200 } // 展开状态宽度变为200
}
]
transitions: Transition {
NumberAnimation { properties: "Layout.preferredWidth"; duration: 300 } // 300ms平滑过渡
}
MouseArea { onClicked: dynamicRect.state = "expanded" } // 点击触发状态切换
}
通过代码动态创建并添加元素到布局，适合动态生成内容的场景：
ColumnLayout {
id: dynamicCol
}
Button {
text: "添加方块"
onClicked: {
// 动态创建矩形并添加到ColumnLayout
var rect = Qt.createQmlObject('import QtQuick 2.15; Rectangle {color: "cyan"; Layout.preferredHeight: 50; Layout.fillWidth: true}', dynamicCol);
}
}
💡 专家提示：结合Layout.fillWidth、Layout.fillHeight让元素填充可用空间，搭配Layout.preferredWidth、Layout.preferredHeight设置默认大小，可精细控制元素自适应行为。