【QT Quick】页面布局：布局 (Layouts)

在 UI 开发中，布局 (Layout) 是设计页面布局、组织控件位置和大小的重要工具。在 QT Quick 中，提供了丰富的布局类，如 ColumnLayout、RowLayout、GridLayout 和 StackLayout，帮助开发者以灵活、简洁的方式管理应用程序中的控件布局。此外，通过调整控件的对齐方式、尺寸、间隔等属性，开发者可以实现高度自适应和响应式的界面布局。本文将对这些布局类型及其关键属性进行详细讲解，并提供丰富的示例代码，帮助开发者掌握 QT Quick 布局的使用方法。

一列布局 ColumnLayout

ColumnLayout 是用于实现垂直方向排列控件的布局工具。它可以将子项从上到下排列，并且每个控件可以根据需要设置对齐方式、最小和最大宽度等属性。

ColumnLayout 示例

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    ColumnLayout {
        anchors.fill: parent
        spacing: 10  // 子项之间的间隔

        Button {
            text: "按钮 1"
            Layout.alignment: Qt.AlignHCenter  // 居中对齐
        }

        TextField {
            placeholderText: "输入文字"
            Layout.minimumWidth: 150  // 最小宽度
            Layout.maximumWidth: 300  // 最大宽度
        }

        Rectangle {
            width: 100
            height: 50
            color: "lightblue"
            Layout.alignment: Qt.AlignRight  // 右对齐
        }
    }
}

在上述示例中，ColumnLayout 将子项垂直排列，Button 居中对齐，TextField 设置了最小和最大宽度，Rectangle 右对齐。

ColumnLayout 重要属性

• spacing：子项之间的垂直间隔。
• Layout.alignment：控制子项在父布局中的对齐方式，如 Qt.AlignLeft、Qt.AlignRight 等。
• Layout.minimumWidth 和 Layout.maximumWidth：用于设置子项的最小和最大宽度。

一行布局 RowLayout

RowLayout 是用于水平排列子项的布局工具。它的功能与 ColumnLayout 类似，但方向为从左到右排列，适用于需要水平排列控件的场景，如按钮组、工具栏等。

RowLayout 示例

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 400
    height: 100

    RowLayout {
        anchors.centerIn: parent
        spacing: 15  // 控件之间的间距

        Button {
            text: "按钮 1"
        }

        Button {
            text: "按钮 2"
        }

        TextField {
            placeholderText: "输入文字"
        }
    }
}

在这个示例中，RowLayout 将两个 Button 和一个 TextField 水平排列，并使用 spacing 属性控制子项之间的间距。

RowLayout 重要属性

• spacing：设置子项之间的水平间隔。
• Layout.fillWidth：如果设置为 true，子项将填充整个布局的宽度。
• Layout.alignment：控制子项在布局中的对齐方式。

网格布局 GridLayout

GridLayout 是一个非常灵活的布局器，它允许将控件以网格形式进行排列，用户可以通过设置行数、列数和单元格间隔来精确控制子项的布局。它非常适合用于表格布局或网格结构的界面。

GridLayout 示例

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    GridLayout {
        columns: 3  // 每行三个元素
        rowSpacing: 10  // 行间距
        columnSpacing: 10  // 列间距
        anchors.centerIn: parent

        Button { text: "按钮 1" }
        Button { text: "按钮 2" }
        Button { text: "按钮 3" }
        Button { text: "按钮 4" }
        Button { text: "按钮 5" }
        Button { text: "按钮 6" }
    }
}

在这个示例中，GridLayout 将 6 个按钮按网格方式排列，每行显示 3 个按钮，并使用 rowSpacing 和 columnSpacing 控制行和列之间的间距。

GridLayout 重要属性

• columns：指定每行的控件个数。
• rowSpacing 和 columnSpacing：控制行与列之间的间隔。
• Layout.rowSpan 和 Layout.columnSpan：控制某个子项占用多行或多列。

叠加布局 StackLayout

StackLayout 是一种特殊的布局方式，它允许将多个控件叠加在一起，所有子控件都处于相同的位置，但在某一时刻只显示其中的一个。这种布局常用于实现 Tab 页、页面切换等场景。

StackLayout 示例

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    StackLayout {
        id: stackLayout
        anchors.fill: parent

        Rectangle {
            width: 100; height: 100
            color: "red"
        }

        Rectangle {
            width: 100; height: 100
            color: "green"
        }

        Rectangle {
            width: 100; height: 100
            color: "blue"
        }

        Timer {
            interval: 1000  // 每秒切换一次
            repeat: true
            running: true
            onTriggered: {
                stackLayout.currentIndex = (stackLayout.currentIndex + 1) % 3
            }
        }
    }
}

在这个示例中，StackLayout 包含了三个 Rectangle，并通过 Timer 控件每秒切换一次当前显示的 Rectangle。

StackLayout 重要属性

• currentIndex：当前显示的子项索引，可以通过改变这个值来切换显示的子项。
• count：返回 StackLayout 中子项的总数。

布局相关属性和功能

对齐方式 (Alignment)

通过设置 Layout.alignment，我们可以灵活控制每个控件在布局中的对齐方式。例如，可以将控件靠左、靠右或者居中对齐。

Rectangle {
    width: 100
    height: 50
    Layout.alignment: Qt.AlignRight
}

常见的对齐方式包括：

• Qt.AlignLeft：左对齐。
• Qt.AlignRight：右对齐。
• Qt.AlignHCenter：水平居中对齐。
• Qt.AlignTop：顶部对齐。
• Qt.AlignBottom：底部对齐。
• Qt.AlignVCenter：垂直居中对齐。

自适应大小 (Size Hints)

每个控件的大小可以通过 Layout.fillWidth、Layout.fillHeight 等属性使其自动适应父容器的大小。

Button {
    text: "自适应按钮"
    Layout.fillWidth: true
    Layout.fillHeight: true
}

通过设置这些属性，控件可以动态填充父容器，适应窗口大小变化。

尺寸限制 (Minimum/Maximum Size)

可以通过 Layout.minimumWidth、Layout.maximumWidth 和 Layout.minimumHeight、Layout.maximumHeight 来限制控件的尺寸范围。

Rectangle {
    Layout.minimumWidth: 100
    Layout.maximumWidth: 300
}

这些属性帮助我们控制子项在不同布局下的尺寸，避免布局过度伸展或缩小。

尺寸设置 (Preferred Size)

在布局中，我们可以通过 Layout.preferredWidth 和 Layout.preferredHeight 设置控件的默认大小，但在自适应布局中，该值可能会被容器的尺寸所影响。

Rectangle {
    Layout.preferredWidth: 200
    Layout.preferred

Height: 100
}

间隔 (Spacing)

ColumnLayout 和 RowLayout 都有一个 spacing 属性，用于控制子项之间的距离。GridLayout 提供了 rowSpacing 和 columnSpacing 属性，分别用于控制行和列的间距。

RowLayout {
    spacing: 20
}

通过调整 spacing 值，我们可以灵活控制控件之间的空隙大小，使布局更美观。

示例

为了展示 QT Quick 布局的灵活性和强大功能，以下是一个综合应用示例，包含 ColumnLayout、RowLayout、GridLayout 和 StackLayout 的使用，以及控件的对齐、自适应大小、间隔和尺寸限制等属性。该示例展示了一个典型的登录界面，用户可以通过不同的布局方式实现控件的组织，使界面简洁且美观。

import QtQuick 2.15  
import QtQuick.Controls 2.15  
import QtQuick.Layouts 1.15  
  
ApplicationWindow {  
    visible: true  
    width: 600  
    height: 400  
    title: "登录界面综合应用"  
  
    // 主布局：ColumnLayout，从上到下排列控件  
    ColumnLayout {  
        anchors.fill: parent  
        spacing: 20  
  
        // 标题栏  
        Label {  
            text: "欢迎登录"  
            font.pointSize: 24  
            Layout.alignment: Qt.AlignHCenter  
            // 可以添加样式表来统一设置字体和颜色  
            // style: LabelStyle { color: "black"; font.family: "Arial" }  
        }  
  
        // 输入区域：GridLayout，用于用户名和密码输入  
        GridLayout {  
            columns: 2  
            rowSpacing: 15  
            columnSpacing: 10  
            Layout.alignment: Qt.AlignHCenter // 虽然这里设置了居中，但GridLayout通常会自动调整大小以适应其内容  
  
            // 用户名标签和输入框  
            Label {  
                text: "用户名:"  
                Layout.alignment: Qt.AlignRight  
            }  
            TextField {  
                placeholderText: "请输入用户名"  
                Layout.minimumWidth: 200  
            }  
  
            // 密码标签和输入框  
            Label {  
                text: "密码:"  
                Layout.alignment: Qt.AlignRight  
            }  
            TextField {  
                placeholderText: "请输入密码"  
                echoMode: TextInput.Password  
                Layout.minimumWidth: 200  
            }  
        }  
  
        // 按钮区域：RowLayout，水平排列登录和注册按钮  
        RowLayout {  
            spacing: 20  
            Layout.alignment: Qt.AlignHCenter  
  
            Button {  
                text: "登录"  
                Layout.preferredWidth: 120  
                onClicked: {  
                    console.log("登录按钮被点击")  
                }  
            }  
  
            Button {  
                text: "注册"  
                Layout.preferredWidth: 120  
                onClicked: {  
                    console.log("注册按钮被点击")  
                }  
            }  
        }  
  
        // 信息区域：StackLayout，用于显示额外的信息  
        StackLayout {  
            id: infoStackLayout  
            Layout.alignment: Qt.AlignHCenter  
            width: parent.width  
            height: 50  
  
            // 错误信息  
            Label {  
                text: "请填写正确的用户名和密码"  
                color: "red"  
                font.pointSize: 12  
            }  
  
            // 忘记密码提示  
            Label {  
                text: "忘记密码？"  
                color: "blue"  
                font.pointSize: 12  
            }  
        }  
  
        // 信息切换按钮  
        Button {  
            text: "切换信息"  
            Layout.alignment: Qt.AlignHCenter  
            onClicked: {  
                infoStackLayout.currentIndex = (infoStackLayout.currentIndex + 1) % infoStackLayout.count  
            }  
        }  
    }  
}

总结

本文介绍了 QT Quick 中常用的几种布局方式，包括 ColumnLayout、RowLayout、GridLayout 和 StackLayout。通过详细的示例代码和对关键属性的讲解，开发者可以灵活运用这些布局工具来设计自适应的用户界面。此外，我们还讨论了对齐方式、尺寸限制、自适应大小等属性，帮助开发者创建更加灵活和响应式的布局。

在实际开发中，合理运用这些布局工具和属性，可以有效提升界面的可用性和美观度。如果你希望构建更复杂的界面，还可以结合多种布局方式，实现嵌套布局，以满足不同场景下的需求。