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

引言

QML 和 Qt Quick

QML 是 Qt Quick 的编程语言，它是一种简洁的声明式编程语言，用于构建动态和跨平台的用户界面。QML 旨在简化 UI 开发，使开发速度更快，并提高设计和开发团队之间的协作效果。QML 结合了易于阅读的 JSON 类型语法，强大的属性绑定和 Javascript 功能，为开发人员提供了专注于 UI 布局和逻辑的高效框架。

Qt Quick 是一个基于 QML 构建高性能、动画且触摸友好的用户界面的 C++ 库。通过 Qt Quick，您可以从丰富的图形效果中受益，同时利用其强大的模型-视图-控制器（MVC）模式创建动态和数据驱动的应用程序。Qt Quick 还是用 C++ 编写的，这解释了其出色的性能表现。Qt Quick 同时也为应用程序提供了可扩展性和跨平台支持，包括桌面、移动和嵌入式设备。

QML 和 Qt Quick 结合，实现了开发人员和设计师能够以更快的速度创建引人入胜的用户界面，同时保持应用程序的性能和可维护性。在实践中，这为 UI 开发带来了重大突破，助力用户设计令人印象深刻的交互式体验。

锚布局的概念

锚布局是 QML 中一种布局方式，允许基于其他元素（如父或兄弟元素）边缘或基线来定义元素之间的相对位置关系。这种布局方法体现了响应式设计原则，使得用户界面能够在不同的窗口大小和设备屏幕上自适应。锚布局简化了布局管理的工作，让开发人员能更专注于创建动态的和面向触摸的交互体验。

在 QML 中，锚布局通过 anchors 属性完成。这组属性允许您在元素之间建立约束关系，例如将一个元素的左侧边缘与另一个元素的右侧边缘对齐，或使两个元素顶部保持一致。通过这些关联关系，您能确保无论父容器的尺寸如何变化，子元素的布局仍然保持一致。

锚布局提供了多个属性，如：left，right，top，bottom，horizontalCenter 和 verticalCenter，用于定义元素间位置关系。此外，还可以通过 anchors.fill 和 anchors.centerIn 属性快速设置布局，使元素填充父容器的可用空间或将元素居中对齐。

综上，锚布局是 QML 的核心概念，使开发人员能够轻松实现响应式和自适应的用户界面布局。

anchors.fill 属性

anchors.fill 是 QML 锚布局中的一个属性，用于简化将子元素填充到父元素或参照元素的整个可用空间的过程。当您使用 anchors.fill 属性时，子元素的所有边缘（左、右、上、下）都会自动与父元素或参照元素的相应边缘对齐。

这个属性实际上是一种快捷方式，将子元素的四个方向上的锚点属性（anchors.left，anchors.right，anchors.top，anchors.bottom）同时设置为与父元素或参照元素的边缘相匹配。

使用 anchors.fill 可以加快布局的开发速度，并确保元素在父容器的可用空间中保持自适应。以下示例展示了如何使用 anchors.fill 属性：

import QtQuick 2.15
Rectangle {
    width: 640
    height: 480
    color: "lightgray"
    Rectangle {
        id: innerRectangle
        color: "blue"
        anchors.fill: parent
        anchors.margins: 20 // 可选，设置与父元素边缘的间距。
    }
}

在此示例中，anchors.fill: parent 指定了 innerRectangle 应填充其父元素（Frame）的整个可用空间，同时通过定义 anchors.margins 添加了与父元素边缘之间的间距。这样就轻松地确保了子元素始终适应父元素的大小。

QML 锚布局基础

锚点属性（左、右、顶、底）

在 QML 中，锚点属性用于确定一个元素相对于另一个元素或其父元素的布局。锚点属性包括左、右、顶和底，分别用于指定元素在水平和垂直方向上的位置关系。这些锚点属性可以让您轻松地定义子元素相对于父元素或兄弟元素边缘之间的布局规则。以下是对每个锚点属性的详细介绍：

1. anchors.left - 该属性用于将元素的左边缘与另一个元素（如父元素或兄弟元素）的左或右边缘对齐。例如，您可以将一个按钮的左边缘锚定到父元素的左边缘，或者在两个元素之间保持一定的水平间距。

Rectangle {
    anchors.left: parent.left
    anchors.leftMargin: 10
}

1. anchors.right - 该属性用于将元素的右边缘与另一个元素（如父元素或兄弟元素）的左或右边缘对齐。例如，您可以将一个按钮的右边缘锚定到父元素的右边缘，或使两个元素在水平方向上紧密相连。

Rectangle {
    anchors.right: parent.right
    anchors.rightMargin: 10
}

1. anchors.top - 该属性用于将元素的顶边缘与另一个元素（如父元素或兄弟元素）的顶或底边缘对齐。例如，您可以将一个按钮的顶边缘锚定到父元素的顶边缘，或在两个元素之间保持一定的垂直间距。

Rectangle {
    anchors.top: parent.top
    anchors.topMargin: 10
}

1. anchors.bottom - 该属性用于将元素的底边缘与另一个元素（如父元素或兄弟元素）的顶或底边缘对齐。例如，您可以将一个按钮的底边缘锚定到父元素的底边缘，或使两个元素在垂直方向上紧密相连。

Rectangle {
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 10
}

通过组合这些属性，您可以控制元素在水平和垂直方向上的位置关系，从而创建动态的和自适应的布局。同时，您还可以使用额外的 anchors.leftMargin，anchors.rightMargin，anchors.topMargin，anchors.bottomMargin 属性来调整元素之间的边缘间距。

使用独立的锚点属性设置元素间的布局关系

使用独立的锚点属性（anchors.left，anchors.right，anchors.top，anchors.bottom）可以在 QML 中灵活地设置元素间的布局关系。下面是一个示例，展示如何利用这些属性构建自适应的界面。

假设我们要创建一个包含三个矩形的布局：左侧矩形、顶部矩形和右侧矩形。我们将使用锚点属性使这些矩形紧密相邻，同时让左侧矩形和顶部矩形共享彼此的一个边缘。

import QtQuick 2.15
Rectangle {
    id: root
    width: 640
    height: 480
    color: "lightgray"
    Rectangle {
        id: leftRectangle
        width: 200
        height: 200
        color: "blue"
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 20
    }
    Rectangle {
        id: topRectangle
        width: 200
        height: 200
        color: "green"
        anchors.left: leftRectangle.right
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 20
    }
    Rectangle {
        id: rightRectangle
        width: 200
        height: 200
        color: "red"
        anchors.left: topRectangle.right
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 20
    }
}

在此示例中，首先让 leftRectangle 的左侧和顶部边缘与父元素（root）的左侧和顶部边缘对齐。然后，使 topRectangle 的左侧边缘与 leftRectangle 的右侧边缘对齐，同时使 topRectangle 的顶部边缘与父元素的顶部边缘对齐。最后，让 rightRectangle 的左侧边缘与 topRectangle 的右侧边缘对齐，同时使其顶部边缘与父元素的顶部边缘对齐。

通过设置这些独立的锚点属性，我们成功构建了一个具有特定布局关系的自适应界面。根据需要，您可以进一步微调布局，例如通过使用 anchors.*Margin 属性添加间距。独立的锚点属性有助于实现精确布局控制，以满足 UI 设计需求。

中心锚点：水平和垂直

在 QML 锚布局中，除了左、右、顶和底这四个基本锚点属性之外，还有两个中心锚点属性：anchors.horizontalCenter 和 anchors.verticalCenter。它们可以方便地将一个元素相对于另一个元素（通常是父元素）水平居中或垂直居中。

1. anchors.horizontalCenter
   这个属性将元素的水平中心（横向中间点）与另一个元素的水平中心对齐。这可以确保元素在水平方向上保持居中。例如，将一个按钮水平居中于其父元素：
   

Rectangle {
    anchors.horizontalCenter: parent.horizontalCenter
}

1. anchors.verticalCenter
   这个属性将元素的垂直中心（纵向中间点）与另一个元素的垂直中心对齐。这可以确保元素在垂直方向上保持居中。例如，将一个按钮垂直居中于其父元素：
   

Rectangle {
    anchors.verticalCenter: parent.verticalCenter
}

您还可以同时使用 anchors.horizontalCenter 和 anchors.verticalCenter 将元素完全居中于另一个元素。

Rectangle {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
}

中心锚点属性简化了在 UI 布局中将元素居中的过程，并确保始终保持良好的自适应性。无论父容器的尺寸如何变化，子元素都将保持居中。

深入了解 anchors.fill

anchors.fill 如何组合单个锚点属性

anchors.fill 属性是 QML 中的一种快捷方式，用于将元素的四个边缘（左、右、顶、底）同时与另一个元素（通常是父元素）的相应边缘相匹配。它实际上组合了四个单独的锚点属性（anchors.left，anchors.right，anchors.top，anchors.bottom），并让您能够更简洁地设置元素的布局约束。

当您使用 anchors.fill 属性时，实际上等效于将元素的四个锚点属性分别与参照元素的四个边缘相连接。以下代码展示了 anchors.fill 属性与单独使用锚点属性的对应关系：

使用 anchors.fill：

Rectangle {
    anchors.fill: parent
}

等效于使用单独的锚点属性：

Rectangle {
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
}

使用 anchors.fill 可以在不引入额外代码的情况下轻松地实现元素与参照元素之间的布局约束，尤其是当您希望子元素填充整个父容器时。这使得 UI 布局更加紧凑和易于管理。

anchors.fill 与其他锚点属性之间的关系

anchors.fill 属性在 QML 锚布局中起到一种简化作用，它将元素的四个边缘（左、右、顶、底）与另一个元素（如父元素）的相应边缘关联。该属性实际上是四个单独锚点属性（anchors.left, anchors.right, anchors.top, anchors.bottom）的组合。

在多数情况下，anchors.fill 用于将子元素填充到父元素（或参照元素）的整个可用空间。当使用 anchors.fill 时，子元素的四个边缘会自动与参照元素的四个边缘对齐。例如：

Rectangle {
    id: child
    anchors.fill: parent
}

在上述示例中，子元素 child 填充了整个父元素。

anchors.fill 与其他锚点属性的关系在于，它等效于一次设置这些锚点属性：

• anchors.left: parent.left
• anchors.right: parent.right
• anchors.top: parent.top
• anchors.bottom: parent.bottom

虽然 anchors.fill 的主要用途是填充参照元素的整个空间，但它也可以与其他锚点属性和边距属性（anchors.leftMargin, anchors.rightMargin, anchors.topMargin, anchors.bottomMargin）结合使用，以达到更精确的布局需求。举个例子：如果要根据需要调整子元素与父元素之间的边缘间距，边距属性便能胜任这一需求。

总之，anchors.fill 属性与其他锚点属性之间的关系在于它简化了元素布局的设置过程，让您能更快地实现恰当的布局。然而，在需要更细致的布局控制时，您仍然可以根据需求单独地使用其他锚点属性。

anchors.fill 的工作方式示例

以下是一个示例，展示如何使用 anchors.fill 属性。此示例创建了一个包含两个子矩形的 QML 父矩形：

import QtQuick 2.15
Rectangle {
    id: root
    width: 400
    height: 400
    color: "lightgray"
    // 子矩形 1
    Rectangle {
        id: rectangle1
        color: "blue"
        // 使用 anchors.fill 属性将子矩形 1 填充至父元素的一半
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right: parent.horizontalCenter
        anchors.bottom: parent.bottom
    }
    // 子矩形 2
    Rectangle {
        id: rectangle2
        color: "red"
        // 使用 anchors.fill 属性将子矩形 2 填充至父元素的另一半
        anchors.left: parent.horizontalCenter
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}

在这个示例中，我们使用 anchors.fill 属性以及其他独立的锚点属性将两个子矩形分别填充至父矩形的左半部和右半部。子矩形 1 的左、顶和底边缘与父矩形的相应边缘对齐，右边缘与父矩形的水平中心对齐。同样地，子矩形 2 的顶、右和底边缘与父矩形的相应边缘对齐，左边缘与父矩形的水平中心对齐。

这个示例展示了如何利用 anchors.fill 和其他锚点属性灵活地实现自适应布局。当父矩形的尺寸发生变化时，子矩形会自动调整，始终填充其所在的父矩形区域。

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