QML之定位器(Column,Row,Flow,Grid)

概述

定位器是一种容器元素，专门用来管理界面中的其他元素，与传统的 Qt Widgets 中的布局管理器类似。使用定位器，你可以很方便地把众多的元素组织在一起，形成非常规则的界面效果。
定位器包括 Row（行定位器）、Column（列定位器）、Grid（表格定位器）、Flow（流式定位器）。
注意：不过有一点需要的是，定位器不会改变它管理的元素的大小，与你使用 Qt Widgets 中的布局管理器的经验不同，不过如果你希望使用 “自动根据界面尺寸变化调整孩子们的尺寸” 这种特性，可以使用 Qt Quick 中的布局管理器。

定位器类型

• 列定位器（Column）
  

Column可以将它的子元素排列成一列,是一种将其子items沿单个列定位的类型。 它可以用作在不使用锚点的情况下垂直定位一系列items的便捷方式。

• 行定位器（Row）
  

Row可以将它 的子元素排列成一行,是一种将其子items沿单行定位的类型。 它可以用作水平定位一系列items而不使用锚点的便捷方式。

• 流式定位器（Flow）
  

Flow 将其子items定位,就像页面上的文字一样，包装它们以创建行或列。
Flow 其实和 Grid 类似，不同之处是它没有显式的行、列数，它会计算自身尺寸和子 item 尺寸来根据需要折行。
它的 flow 属性，默认取值 Flow.LeftToRight ，从左到右安排 item ，直到 Flow 本身的宽度被超出时折行；
当 flow 取值 Flow.TopToBottom 时，从上到下安排 item ，直到 Flow 本身的高度被超出时开始在下一列上安排 item 。

• 网格定位器（Grid）
  

Grid 是一种以网格形式定位其子items的类型。

Grid 创建一个足够大的单元格网格以容纳其所有子items，并将这些items从左到右和从上到下放置在单元格中。 每个items都位于其单元格的左上角，位置为 (0, 0)。
Grid 默认为四列，并根据需要创建尽可能多的行以适合其所有子items。 可以通过设置 rows 和 columns 属性来限制行数和列数。

定位器特性

共有特性

四周填充属性：

• bottomPadding: real
• leftPadding: real
• rightPadding: real
• topPadding:real
• padding: real
  以上属性是设置布局内元素四周的边距。

• effectiveLayoutDirection : enumeration
  此属性保存行的有效布局方向。
  注意：当设置 LayoutMirroring::enabled为true时，定位器的视觉布局方向将被镜像。但属性的 layoutDirection 将保持不变.
• layoutDirection : enueration
  此属性用来指定定位器的排列方式。

1. Qt.LeftToRight （默认）
   子元素从左到右排列。如果明确设置了行的宽度，则左锚点将保持在Row的左侧。
2. Qt.RightToLeft 子元素从右到左排列。
   如果明确设置了行的宽度，则右锚点将保持在定位器的右侧。

• populate : Transition
  此属性保存创建定位器时运行的转换,指定了在首次创建此定位器时，所有子元素的过渡效果。
  过渡效果可以使用ViewTransition属性来访问有关添加items的更多详细信息.
• spacing : real
  子元素的间距（单位为像素），默认间距为0.
  此外Grid还包含columnSpacing和rowSpacing属性
• add: Transition
  为添加子元素到Row对象的过程添加过渡效果。适用于以下情况：
  1.创建定位器后，子元素的创建和重新定位。
  2.将子元素的Item::visible属性从false设置为true。
• move : Transition
  此属性保存为在定位器内移动的items运行的过渡。
  这适用于由于定位器中items的添加、移除或重新排列而移位时会移动的子items。 由于定位器中items的大小调整而重新定位的子items。

Flow其他特性

• flow : enumeration

1. Flow.LeftToRight（默认）- 根据 layoutDirection 将items彼此相邻放置，直到超过 Flow 的宽度，然后换行到下一行。
2. Flow.TopToBottom - items从上到下彼此相邻放置，直到超过 Flow 的高度，然后包裹到下一列。

Grid其他特性

• rows : int

此属性保存网格中的行数。

如果网格没有足够的items来填充指定的行数，则某些行的宽度将为零。

• columns : int

此属性保存网格中的列数。 默认列数为 4。

如如果网格没有足够的items来填充指定的列数，则某些列的宽度将为零。

• flow : enumeration

1. Grid.LeftToRight（默认）- items在 layoutDirection 中彼此相邻放置，然后换行到下一行。
2. Grid.TopToBottom - items从上到下彼此相邻放置，然后包裹到下一列。

• 对齐方式:

[read-only, since 5.1]effectiveHorizontalItemAlignment : enumeration
[since 5.1]horizontalItemAlignment : enumeration
[since 5.1]verticalItemAlignment : enumeration

设置 Grid 中items的水平和垂直对齐方式。 默认情况下，items与顶部垂直对齐。 水平对齐遵循 Grid 的 layoutDirection，例如，当 layoutDirection 来自 LeftToRight 时，items将在左侧对齐。
HorizontalItemAlignment 的有效值为 Grid.AlignLeft、Grid.AlignRight 和 Grid.AlignHCenter。
verticalItemAlignment 的有效值为 Grid.AlignTop、Grid.AlignBottom 和 Grid.AlignVCenter。
另外,当使用附加属性 LayoutMirroring::enabled 或通过设置 layoutDirection 镜像布局时，items的水平对齐方式也将被镜像。 但是，属性 HorizontalItemAlignment 将保持不变。 要查询items的有效水平对齐方式，请使用只读属性 EffectiveHorizontalItemAlignment。
这个 QML 属性是在 Qt 5.1 中引入的。

定位器信号

positioningComplete()

定位完成后发送该信号。
注意：对应的handler是onPositioningComplete。
这个信号是在 Qt 5.9 中引入的。

定位器方法

forceLayout()

定位器通常每帧定位一次它的子节点。 这意味着在脚本块内部，底层子级可能已更改，但其本身尚未相应更新。

此方法强制定位器立即对其子元素中任何未完成更新的立即做出响应。

注意：一般方法只能在组件完成后调用。

这种方法是在 Qt 5.9 中引入的。