QML/Qt Quick anchors.fill 的使用（二）

QML/Qt Quick anchors.fill 的使用（一）https://developer.aliyun.com/article/1464247

使用场景和实际应用

需要填充父元素时使用 anchors.fill 的场景

当您需要让一个子元素填充到父元素（或参照元素）的整个可用空间时，anchors.fill 属性非常方便。以下是一些常见的使用 anchors.fill 的场景：

1. 背景层：在 UI 中，您可能需要一个子元素充当背景，填充整个父容器。在这种情况下，使用 anchors.fill 让背景始终填充父容器并在尺寸变化时自动调整。

Rectangle {
    id: root
    width: 600
    height: 400
    Rectangle {
        color: "lightblue"
        anchors.fill: parent  // 背景填充整个父容器
    }
}

1. 子元素填充容器：当使用 GridLayout、Column 或 Row 嵌套布局时，子元素可能需要填充其父容器部分。例如，一个自适应的按钮组，其中的按钮填充父 Row 的整个高度：

import QtQuick 2.15
Row {
    id: buttonRow
    width: 600
    height: 60
    spacing: 10
    Rectangle {
        color: "red"
        width: 100
        anchors.fill: parent  // 按钮填充 Row 的高度
    }
    Rectangle {
        color: "blue"
        width: 100
        anchors.fill: parent  // 按钮填充 Row 的高度
    }
}

1. 图像缩放：在设置背景图像、网页视窗或缩放相册等场景时，使用 anchors.fill 让图像填充整个父容器。请注意，这种情况可能导致图像比例不当。可以通过设置适当的缩放模式来调整图像比例。

Rectangle {
    id: root
    width: 800
    height: 600
    Image {
        source: "background.jpg"
        anchors.fill: parent  // 图像填充整个父容器
        fillMode: Image.PreserveAspectFit  // 保持图像宽高比
    }
}

在这些场景中，使用 anchors.fill 为您提供了快速、简洁的布局设计方式，并确保子元素在父容器的可用空间中保持自适应。同时，您还可以根据需要利用边距属性（anchors.margins 或 anchors.leftMargin, anchors.rightMargin, anchors.topMargin, anchors.bottomMargin）调整元素之间的间距。

应用程序中如何利用 anchors.fill 处理不同大小和分辨率的窗口

在使用 anchors.fill 时，子元素会根据窗口尺寸进行自动调整。以下是一个使用 anchors.fill 的 QML 示例，展示一个具有自适应图像背景和居中文本的简单应用程序。无论窗口或屏幕的大小和分辨率如何变化，元素都始终完美适应窗口。

import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
    id: mainWindow
    visible: true
    width: 800
    height: 600
    Image {
        id: backgroundImage
        source: "background.jpg"
        anchors.fill: parent  // 图像填充整个父窗口
        fillMode: Image.PreserveAspectCrop  // 保持宽高比并裁剪多余部分
        // 确保 image 被放置在文本和其他 UI 元素的下方
        z: -1
    }
    Text {
        id: centeredText
        text: "Welcome to our application!"
        font.pixelSize: 32
        color: "white"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

在此示例中，我们将背景图像的锚点属性设置为填充整个窗口。通过将 fillMode 设置为 Image.PreserveAspectCrop，图像在保持宽高比的同时会随窗口拉伸，并裁剪多余部分。ApplicationWindow 可以根据不同大小和分辨率的窗口自动调整图像。

同时，我们将一个 Text 元素水平垂直居中于窗口。通过使用 anchors.horizontalCenter 和 anchors.verticalCenter，文本始终保持在窗口的中央位置。

在实际应用程序中，您可以根据需要使用更复杂的布局和多个层次的自适应元素。关键在于充分利用 QML 的锚点和布局属性，设定合适的组件顺序和层叠顺序，以确保应用在不同大小和分辨率的屏幕上仍能保持良好的视觉效果。

与其他布局的比较

其他布局类型

QML 提供了多种布局方式，下面我们将简要介绍一些常见的布局类型，并与使用 anchors.fill 和其他锚点属性的锚布局进行比较：

1. 锚布局：
   使用 anchors 属性（如 anchors.fill、anchors.left、anchors.horizontalCenter 等）实现元素之间的相对定位。它灵活且直观，能在不同窗口大小和屏幕分辨率下保持良好的自适应性。锚布局适用于多种复杂场景，如元素之间的对齐、填充、保持居中等。
   
2. 定位布局：
   使用 x 和 y 属性实现元素在父容器中的绝对定位。它简单易用，但在窗口调整大小或分辨率变化时可能无法很好地自适应。定位布局适用于简单的界面或界面组件，静态大小和布局要求不严格的场景。
   
3. 列布局（Column）：
   允许将子元素垂直堆叠。它非常适合有序的垂直列表或具有固定间距和顺序的元素。缺点是不易处理复杂的水平布局要求。可以与其他布局方式结合使用以创建更复杂的界面。
   示例：

Column {
    anchors.fill: parent
    spacing: 10
    Text { text: "Item 1" }
    Text { text: "Item 2" }
    Text { text: "Item 3" }
}

1. 行布局（Row）：
   类似于列布局，但将子元素水平堆叠。适用于水平列表或固定间距和顺序的元素。可以与其他布局方式结合使用以创建更复杂的界面。
   示例：

Row {
    anchors.fill: parent
    spacing: 10
    Text { text: "Item 1" }
    Text { text: "Item 2" }
    Text { text: "Item 3" }
}

1. 网格布局（GridLayout）：
   在行和列的二维网格中布局子元素。它相对复杂，但具有高度的灵活性，能够轻松地处理多行和多列元素的布局。也可与其他布局方式结合使用很好地处理更复杂的界面需求。
   示例：

GridLayout {
    anchors.fill: parent
    columns: 3
    rows: 3
    rowSpacing: 5
    columnSpacing: 5
    // 在网格中添加子元素 Item { ... }
}

高级布局类型的特性和应用方法：

1. ColumnLayout 和 RowLayout 的填充策略：在ColumnLayout和RowLayout中可以使用如下属性确定填充策略：

• Layout.fillWidth 和 Layout.fillHeight：它们允许子项自适应占据剩余空间，从而弹性布局。
• Layout.preferredWidth 和 Layout.preferredHeight：它们设置子项的首选尺寸，该尺寸会在父布局调整大小时考虑。

请注意，这些属性必须在子项内设置。

1. GridLayout 中的行和列设置：在GridLayout中，您可以使用以下属性模板来分配行和列的空间：

• Layout.row：指定子项所处的行。
• Layout.column：指定子项所处的列。
• Layout.rowSpan：指定子项在网格中跨越的行数。
• Layout.columnSpan：指定子项在网格中跨越的列数。

请注意，这些属性必须在子项内设置。下面是调整网格布局中子项的示例：

import QtQuick 2.15
import QtQuick.Layouts 1.15
Rectangle {
    id: root
    width: 600
    height: 600
    GridLayout {
        anchors.fill: parent
        columns: 3
        rows: 3
        rowSpacing: 5
        columnSpacing: 5
        Rectangle {
            color: "red"
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.column: 0
            Layout.row: 0
            Layout.rowSpan: 2
        }
        Rectangle {
            color: "green"
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.column: 2
            Layout.row: 0
        }
    }
}

1. 设置间距和边距：在所有高级布局（ColumnLayout、RowLayout和GridLayout）中，您可以使用以下属性设置间距和边距：

• spacing：设置子项之间的间距。
• margins：设置父元素外围的边距。

示例：

import QtQuick 2.15
import QtQuick.Layouts 1.15
Rectangle {
    id: root
    width: 600
    height: 600
    ColumnLayout {
        anchors.fill: parent
        spacing: 10
        margins: 20
        Rectangle {
            color: "red"
            Layout.fillWidth: true
            Layout.preferredHeight: 100
        }
        Rectangle {
            color: "green"
            Layout.fillWidth: true
            Layout.preferredHeight: 100
        }
    }
}

现在您已经了解了更多关于 ColumnLayout、RowLayout 和 GridLayout 的高级特性。可以通过这些特性灵活配置不同场景的布局需求，为您的应用创建适应各种大小和分辨率的稳定用户界面。这些高级布局类型还可以与基于锚点的布局相结合，以实现更复杂的效果。

总结：与其他布局方式相比，锚布局具有灵活性和自适应能力。它非常适合应对复杂的 UI 场景，特别是与其他布局方式结合使用时。然而，在特定场景中，其他布局方式（如 Column、Row 和 GridLayout）可能更适合快速实现规整的元素布局。您应该根据实际应用需求选择合适的布局方式，甚至组合使用多种布局以创建稳定、自适应且美观的界面。

比较锚布局和其他布局方法：优势、劣势和适用情况

锚布局与其他布局方法有各自的优缺点。根据使用场景，您可能会选择不同的布局方法。在这里，我们将对锚布局与其他布局类型进行比较，分析其优势、劣势和适用情况。

1. 锚布局：优势：

• 相对布局易于理解和使用。
• 能够轻松处理窗口大小改变和分辨率不同的场景，具有良好的自适应性。
• 适用于复杂的 UI 场景，如元素间的对齐、填充和保持居中。
• 在需要的情况下可以与其他布局组合使用，实现丰富的布局效果。
  劣势：
• 对于有序排列的元素，需要手动计算布局。
• 相对其他布局类型，为实现相同效果可能需要更多的样式和布局计算。
  适用情况：
• 当需要实现可扩展的 UI 且需要满足不同窗口尺寸和分辨率时。
• 对元素相对位置的具体控制和灵活调整。

2. 列布局（Column）、行布局（Row）和其他基础布局：优势：

• 易于理解和应用于简单的 UI 场景。
• 能够快速实现规整的列表和有序排列。
• 对于简单的界面元素，上手迅速。
  劣势：
• 不够灵活，处理复杂 UI 场景时需要与其他布局类型结合使用。
• 对于窗口大小改变和分辨率不同的场景，适应能力较弱。
  适用情况：
• 当需要实现简单规整的元素排列，如纵向列表、横向列表、按钮组等。
• 界面简单，元素以固定间隔、直线排列的布局。

3. 高级布局类型（ColumnLayout、RowLayout 和 GridLayout）：优势：

• 高度灵活，能够处理复杂的 UI 场景。
• 很好地支持窗口大小改变和分辨率不同的场景。
• 可以在嵌套布局中使用，实现复杂的 UI 效果。
• 可以与锚布局结合使用，扩展布局功能。
  劣势：
• 相对于基础类型的布局，学习成本和实现难度较高。
• 对于简单的规整布局，使用高级布局可能显得冗余。
  适用情况：
• 创建具有多行或多列的自适应布局。
• 需要适应窗口大小改变和不同分辨率的复杂 UI。
• 与其他布局类型结合使用，实现高度自定制和复杂的界面设计。

根据您的实际需求，您可以选择合适的布局类型。在处理复杂 UI 场景时，您可能需要灵活地组合多种布局方法以实现最佳效果。通常，高级布局类型（如 ColumnLayout、RowLayout 和 GridLayout）与锚布局结合使用，能够满足各种 UI 设计需求。

什么时候使用其他布局什么时候使用 anchors.fill，什么时候使用其他布局

anchors.fill 是锚布局的一部分，它让一个元素完全填充另一个元素。以下是使用 anchors.fill 与其他布局方法的推荐场景：

使用 anchors.fill 的场景：

1. 当您希望一个元素完全覆盖另一个元素时，例如在父元素或其他引用元素改变大小时自动填充整个区域。
2. 当作为背景元素时，例如背景图像或色彩等，您希望它们始终占据整个视图。
3. 当一个视图或界面组件需要填满其容器时，不管容器尺寸如何变化，都能保持填充状态。

示例：

Rectangle {
    id: outerRectangle
    width: 200
    height: 200
    Rectangle {
        id: innerRectangle
        anchors.fill: outerRectangle
        color: "blue"
    }
}

使用其他布局方法的场景：

1. 当您需要在一个容器内以有序的方式排列多个元素时，例如列表、网格等，您可以考虑使用 Column、Row 或 GridLayout。
2. 当您需要元素之间保持特定的相对关系，例如对齐、距离、居中等，可以选择锚布局中的其他锚点属性，如 anchors.left、anchors.right、anchors.top、anchors.bottom、anchors.horizontalCenter 或 anchors.verticalCenter。
3. 当需要创建高度自定义和复杂的布局时，可以选择高级布局类型，如 ColumnLayout、RowLayout 或 GridLayout。

根据具体场景，您可能需要结合使用 anchors.fill 和其他布局方法来实现所需的界面。最好是理解各种布局类型的优点和适用性，并根据实际需求灵活组合使用。

QML/Qt Quick anchors.fill 的使用（三）https://developer.aliyun.com/article/1464249