布局控制节点¶
使用布局控制节点来排列内容。布局控制节点对于在使用 Kanzi 应用程序期间动态添加或删除的内容,或从外部来源加载的内容特别有用,例如,从目录中的文件加载的内容。
用 Grid Layout 节点将项目排列在表中。
|
用 Stack Layout 节点将项目并排放置。
|
用 Flow Layout 节点将项目排列成行。
|
使用 Trajectory Layout 节点沿轨迹排列项目。
|
使用 Dock Layout 节点沿布局的边缘相对于彼此排列项目。
|
在 UI 控件中使用 Content Layout 节点将内容呈现为单个项目。
|
通用布局属性¶
要在您的 Kanzi 应用程序中定位项目,您可以使用这些变换类型:
布局变换是在应用布局通道前对项进行变换。
渲染变换是在应用布局通道后、渲染前对项进行变换。
Kanzi 在应用布局变换后应用渲染变换,并且不影响布局计算。例如,这允许您在布局中对节点进行动画处理,而不会导致布局重新计算。
布局控制节点,例如 Stack Layout 和 Grid Layout 节点,对其所有直接子节点应用其自身的变换,而这些子节点则根据其自身的子节点、布局变换、边距和对齐方式定义其自身的布局。
对齐定义了布局的重心。例如,将 Horizontal Alignment 属性设置为 Right 以将节点对齐到其父布局的右侧。通过将对齐属性设置为 Stretch,节点会拉伸到其父布局的尺寸。使用 Content Stretch 属性来指定布局如何处理其内容。
边距强制对象相对于其父布局的边框进行间距。例如,设置 Horizontal Margin 属性以设置节点左右两侧相对于其父布局的间距。
布局属性会覆盖节点的边界框大小。默认布局大小由节点的大小决定,基于其边界框和边距。
例如,沿 x 轴方向设置的 Stack Layout 节点根据其尺寸(边界框)将其两个子节点彼此相邻放置。通过使用 Layout Width 属性,您可以覆盖边界框的宽度:小于节点大小的值会使节点重叠,而大于节点大小的值会扩展两个节点之间的空间。
在所有布局任务完成后,Kanzi 应用来自父节点的最终变换。Screen 节点下的 RootPage 如果是 Viewport 2D 或 Empty Node 2D,则其布局有特殊规则。它继承定义的屏幕尺寸,除非由布局属性定义。