位置和尺寸属性

位置

x、y ：绝对位置

anchors：相对定位属性

在QML中，anchors 属性是一组用于定义一个元素与其他元素或其父元素之间相对位置关系的属性。这些属性允许开发者通过指定元素的关键位置与其他元素的关键位置之间的对齐来确定界面元素的位置，而不是直接设置元素的具体坐标。anchors 提供了一种灵活且强大的方式来创建响应式和自适应的用户界面。

锚点布局的基本组成部分

每个可视化元素（如 Rectangle, Image 等）都有7条不可见的锚线：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）以及基线（baseline）。其中，基线通常对应于文本所在的虚线，对于没有文本的项目而言，默认与顶部相同。

常用的 anchors 属性

• anchors.left：将元素的左边与另一个元素的右边、左边或其他锚点对齐。
• anchors.right：将元素的右边与另一个元素的左边、右边或其他锚点对齐。
• anchors.top：将元素的顶部与另一个元素的底部、顶部或其他锚点对齐。
• anchors.bottom：将元素的底部与另一个元素的顶部、底部或其他锚点对齐。
• anchors.horizontalCenter：使元素在其父元素或指定元素的水平中心对齐。
• anchors.verticalCenter：使元素在其父元素或指定元素的垂直中心对齐。
• anchors.centerIn：使元素完全居中于另一个元素内部，相当于同时设置了 anchors.horizontalCenter 和 anchors.verticalCenter。
• anchors.fill：让一个元素填充另一个元素的空间，这实际上等同于同时设置了 anchors.left, anchors.right, anchors.top, 和 anchors.bottom。
• anchors.baseline：使元素中的文本基线与其他元素的基线对齐，适用于包含文本的元素。

边距和偏移量

除了上述基本的锚点外，还可以为每个方向上的锚点指定边距（margins），以增加或减少元素边缘与锚点之间的距离。例如：

• anchors.leftMargin：设置左侧边距。
• anchors.rightMargin：设置右侧边距。
• anchors.topMargin：设置顶部边距。
• anchors.bottomMargin：设置底部边距。
• anchors.margins：一次性为所有四个方向设置相同的边距值。

此外，还有偏移量属性，用于微调基于中心点的定位：

• anchors.horizontalCenterOffset：水平中心的偏移量。
• anchors.verticalCenterOffset：垂直中心的偏移量。
• anchors.baselineOffset：基线的偏移量。

特殊情况

需要注意的是，当使用 anchors.fill 或 anchors.centerIn 时，它们的优先级比其他六个方向上的锚点描述要高一些。如果存在冲突，则以前者为准。

另外，在某些情况下，你可能需要动态改变锚点，这时可以使用 AnchorChanges 类型，并结合 State 和 Transition 来实现动画效果。然而，在JavaScript中更改锚点时应当谨慎操作，确保先取消不再需要的锚点再添加新的锚点，以免引起意外行为。

Layout：布局中定位

在QML中，Layout 属性是附加属性，用于提供有关项目在布局管理器中的位置和尺寸的信息。这些属性允许开发者控制项目如何被排列以及它们的大小如何响应父容器的变化。以下是 Layout 属性的主要组成部分及其功能描述：

1. 对齐方式（Alignment）：通过 Layout.alignment 属性指定项目在其占据的空间内的对齐方式。可以设置水平或垂直方向上的对齐，例如 Qt.AlignLeft、Qt.AlignHCenter、Qt.AlignRight、Qt.AlignTop、Qt.AlignVCenter、Qt.AlignBottom 和 Qt.AlignBaseline 。

2. 填充宽度/高度（Fill Width/Height）：Layout.fillWidth 和 Layout.fillHeight 布尔属性决定了项目是否应该扩展以填满其可用空间。如果设置为 true，则项目将在遵守给定约束的同时尽可能宽或高。这使得项目能够根据窗口或父容器的大小变化自动调整自身尺寸 。

3. 最小/最大尺寸（Minimum and Maximum Size）：可以通过 Layout.minimumWidth、Layout.preferredWidth 和 Layout.maximumWidth（对于宽度）以及对应的 height 属性来定义项目的尺寸限制。这些属性确保了即使当布局试图改变项目的大小时，也不会超出设定的界限 。

4. 首选尺寸（Preferred Size）：Layout.preferredWidth 和 Layout.preferredHeight 属性指定了项目的理想尺寸。如果未明确给出，则布局将使用项目的隐式尺寸（implicitWidth 和 implicitHeight）。这些属性有助于确定项目在布局中的默认尺寸，并且可以在多个候选属性中优先考虑 。

5. 边距（Margins）：Layout.leftMargin、Layout.rightMargin、Layout.topMargin 和 Layout.bottomMargin 用来设置项目周围的外部边距。此外，还有一个简化的 Layout.margins 属性可以一次性设置所有四个方向的边距 。

6. 网格坐标（Grid Coordinates）：对于 GridLayout，可以使用 Layout.row 和 Layout.column 来指定项目所在的行和列。同时，还可以用 Layout.rowSpan 和 Layout.columnSpan 来表示项目跨越多行或多列的情况 。

7. 间距（Spacing）：虽然这不是一个直接的 Layout 属性，但在布局管理器如 RowLayout 或 ColumnLayout 中，可以通过 spacing 属性来控制子项之间的间隔距离。类似地，在 GridLayout 中有 rowSpacing 和 columnSpacing 分别用于行间和列间的额外空间 。

8. 镜像（Mirroring）：LayoutMirroring 附加属性允许在水平方向上镜像布局，这对于支持从左到右（LTR）和从右到左（RTL）两种书写系统的应用程序特别有用 。

9. 自动尺寸（Auto Sizing）：当 Layout.fillWidth 或 Layout.fillHeight 设置为 true 时，项目会尝试根据布局分配的空间调整自己的尺寸，而无需显式地绑定 width 或 height 属性，避免了与布局管理冲突的风险 。

按钮

Button