当前位置：首页 > news >正文

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

news 来源：原创 2025/6/24 19:04:59

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: 10
    Rectangle { width: 100; height: 100; color: "red" }
    Rectangle { width: 100; height: 100; color: "blue" }
}

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

1.2. Column

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

使用方法：


Column {

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

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

1.3. Grid

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

使用方法：


Grid {

    columns: 2
    spacing: 10
    Rectangle { 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: parent
    Rectangle {
        Layout.fillWidth: true
        color: "red"
        height: 50
    }
    Rectangle {
        Layout.preferredWidth: 50
        color: "blue"
        height: 50
    }
}

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

1.5. ColumnLayout

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

使用方法：


ColumnLayout {

    anchors.fill: parent
    Rectangle {
        Layout.fillHeight: true
        color: "green"
        width: 50
    }
    Rectangle {
        Layout.preferredHeight: 50
        color: "yellow"
        width: 50
    }
}

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

1.6. GridLayout

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

使用方法：


GridLayout {

    columns: 2
    rows: 2
    spacing: 10
    Rectangle { 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 属性定义网格的行列数，子元素自动填充网格单元。