QML面试笔记--UI设计篇02布局控件

1. QML 中常用的布局控件
- 1.1. Row
- 1.2. Column
- 1.3. Grid
- 1.4. RowLayout
- 1.5. ColumnLayout
- 1.6. GridLayout
- 1.7. 总结

1. QML 中常用的布局控件

1.1. Row

背景知识：Row 布局用于将子元素水平排列，适合简单的线性布局，如工具栏按钮或表单输入项。

使用方法：


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

详细介绍：子元素从左到右依次排列，可以通过 spacing 属性设置子元素之间的间距。

1.2. Column

背景知识：Column 布局用于将子元素垂直排列，适合需要从上到下阅读的场景。

使用方法：


Column {spacing: 10Rectangle { width: 100; height: 100; color: "green" }Rectangle { width: 100; height: 100; color: "yellow" }
}

详细介绍：子元素从上到下依次排列，可以通过 spacing 属性设置子元素之间的间距。

1.3. Grid

背景知识：Grid 布局用于将子元素按照网格形式排列，适合需要等距对齐的场景，如仪表盘或图片缩略图列表。

使用方法：


Grid {columns: 2spacing: 10Rectangle { width: 100; height: 100; color: "red" }Rectangle { width: 100; height: 100; color: "blue" }Rectangle { width: 100; height: 100; color: "green" }Rectangle { width: 100; height: 100; color: "yellow" }
}

详细介绍：通过 columns 属性定义网格的列数，子元素自动填充网格单元。

1.4. RowLayout

背景知识：RowLayout 是 Row 的增强版，提供更多的布局功能，如自动调整子元素大小以填充可用空间。

使用方法：


RowLayout {anchors.fill: parentRectangle {Layout.fillWidth: truecolor: "red"height: 50}Rectangle {Layout.preferredWidth: 50color: "blue"height: 50}
}

详细介绍：可以通过 Layout.fillWidth 和 Layout.preferredWidth 属性控制子元素的宽度。

1.5. ColumnLayout

背景知识：ColumnLayout 是 Column 的增强版，提供更多的布局功能。

使用方法：


ColumnLayout {anchors.fill: parentRectangle {Layout.fillHeight: truecolor: "green"width: 50}Rectangle {Layout.preferredHeight: 50color: "yellow"width: 50}
}

详细介绍：可以通过 Layout.fillHeight 和 Layout.preferredHeight 属性控制子元素的高度。

1.6. GridLayout

背景知识：GridLayout 是一种更灵活的网格布局，允许定义行和列，并支持复杂的布局需求。

使用方法：


GridLayout {columns: 2rows: 2spacing: 10Rectangle { width: 100; height: 100; color: "red" }Rectangle { width: 100; height: 100; color: "blue" }Rectangle { width: 100; height: 100; color: "green" }Rectangle { width: 100; height: 100; color: "yellow" }
}

详细介绍：通过 columns 和 rows 属性定义网格的行列数，子元素自动填充网格单元。