布局控件
# PinToo控件使用(布局设计)
该组中包含了用于客户端布局设计的所有界面类型控件,通过布局的设计可以帮助用户更好实现页面的布局效果,减少因为终端设备分辨率不同而导致的显示异常。
# 1. TfxLayout组件
- 引用单元 FMXLayouts
布局组件是其他图形对象的容器。
当您需要在同一父项下组织多个图形控件时,请使用布局组件。
例如,当您需要创建功能丰富的FireMonkey应用程序时,可以使用这些布局,这些应用程序具有在同一层上分组的许多图形控件。您可以通过影响布局的可见性来一次设置布局上所有控件的可见性。
# 2. TfxScaledLayout组件
- 引用单元 FMXLayouts
当FireMonkey缩放布局是经包装的TControl和作用就像用于与根据该布局的物理尺寸缩放其内容的可能性的其他对象的层。
缩放的布局是其他图形对象的容器,可以对其内容进行缩放,如下图所示。
标签和按钮将根据包含作为客户对齐的图层的表单的尺寸进行缩放,以使该图层占据整个表面。
# 3. TfxGridLayout组件
- 引用单元 FMXLayouts
将子控件排列在大小相等的单元格的网格中的控件。
当用TfxGridLayout网格布局时,如下图效果所示作为TfxButtonr的容器:
需要调整TfxGridLayout的Item(子控件)大小时,可通过ItemHeight和ItemWidth属性指定大小。如果将方向设置为Horizontal(水平),则将TfxGridLayout的Item(子控件)逐行排列,直到在网格中添加新行时超出布局的宽度为止。如果将方向设置为Vertical(垂直),则在将新列添加到网格时,TfxGridLayout的子控件将一个接一个地放置,直到超出布局的高度为止。
但是,您可以使用子控件的Margins(边缘)属性自定义子控件的大小。例如,下图演示了Button5,Button6,Button7和Button8子控件使用不同边距的用法:
在这里我们设置:
- Button5的顶部和底部边距。
- Button6的左边距。
- 这四顶,左,右和底边距Button7。
- Button8的顶部和左侧边距。
查看如何调整子控件的大小并将其放置在各个网格单元内。
注意:将忽略TGridLayout中控件的Align属性。将自动设置子控件的Position,Height和Width属性,并且显式更改其值无效。
# 4. TfxGridPanelLayout组件
- 引用单元 FMXLayouts
实现网格面板布局控件,其中每个组件都放置在网格面板上的单元格内。
在TGridPanelLayout布局中,您可以在网格面板上指定行数和列数,然后将每个组件放置到网格面板中的下一个可用单元格中,而不管用鼠标将其放置在何处。如果每个网格面板布局的单元格已经包含一个控件,并且您添加了更多控件,则新控件的位置由ExpandStyle属性确定。例如,使用ExpandStyle属性的默认AddRows值,将新行添加到网格面板,并且该行中的每个单元格都可以包含一个新控件。
TfxGridPanelLayout布局提供以下行为:
您可以显式设置子控件的Height(高度), Width(宽度),Align(对齐方式)和Anchors属性,以手动调整和对齐放置在TfxGridPanelLayout布局的单元格内的子控件的大小:
例如,您可以指定子控件可以跨多个合并的单元格。看下图:
在这里,B4按钮跨在最右边一列的两个单元格上,B5按钮在两行两列中占据四个单元格,而B8按钮在下一行中占据三个单元格。
若要指定子控件可以跨几个单元格,可以使用以下技巧:
- 在“ 结构”视图中,找到所需的TfxGridPanelLayout布局节点。
- 在此节点下,找到相应的Control Collection节点。
- 在此控件中Control Collection,选择与所需子控件关联的控件。在Properties(属性查看器)中显示了这个控制项的属性。
- 在ColumnSpan属性中,键入相应列中的控件项可以占用的单元格数(在Column属性中指定)。
- 在RowSpan属性中,键入相应行中的控件项可以占用的单元格数(在Row属性中指定)。
# 5. TfxFlowLayoutBreak组件
- 引用单元 FMXLayouts
TfxFlowLayoutBreak在运行时不可见,将其用作独立对象无效。它仅作为TfxFlowLayout的子级才有效。
# 6. TfxFlowLayout组件
- 引用单元 FMXLayouts
TfxFlowLayout的子项一行一行地排列。当超过布局的宽度时,剩余的子控件将换行到下一行,依此类推,直到所有控件都被放置。如要在一个普通的文本添加换行符一样的效果,加一个TfxFlowLayoutBreak到当前TfxFlowLayout中实现。
控件流向可以从左到右或从右到左。要更改方向,请设置FlowDirection(流向)属性。更改方向不会更改控件的行,而只会更改控件在每行上的顺序。
可以通过设置HorizontalGap(水平间隙)和VerticalGap(垂直间隙)属性来自定义同一行中控件之间的距离以及行之间的距离。
可以通过Justify属性自定义对齐方式,设置TfxFlowLayout,left(左),Right(右),Center(中心)或justified(调整)属性调整子控件们在一个段落字对齐方式。布局中最后一行的对齐方式将单独处理,可以通过JustifyLastLine(调整最后一行)属性设置。如果只有一行,则Justify(调整)无效,该行被视为最后一行,并根据JustifyLastLine(调整最后一行)对齐。
注意:将忽略TfxFlowLayout中控件的Align(对齐)属性。子控件的Position(位置)属性是自动设置的,显式更改其值无效。
TfxFlowLayout组件可以用来获得这样的结果:
# 7. TfxScrollBox组件
- 引用单元 FMXLayouts
TfxScrollBox作为一个滚动框组件,可以使组件位于其中,当其中组件超过了显示的边缘,可以生成上下左右的滚动条。
# 8. TfxVertScrollBox组件
- 引用单元 FMXLayouts
TfxVertScrollBox作为一个滚动框组件,可以使组件位于其中,与TfxScrollBox不同的是,该组件只会在垂直方向上生成滚动条。
# 9. TfxSuperVertScrollBox组件
- 引用单元 FMXLayouts
TfxSuperVertScrollBox的作用与功能和TfxVerScrollBox相似,具有垂直方向上的滚动条,与TfxSuperVertScrollBox组件不同的是,该组件还增加了位于垂直方向上的向上拖动与向下拖动滑块,可根据操作触发相应的事件。
# 10. TfxHorzScrollBox组件
- 引用单元 FMXLayouts
TfxHorzScrollBox作为一个滚动框组件,可以使组件位于其中,与TfxScrollBox不同的是,该组件只会在水平方向上生成滚动条。
# 11. TfxFramedScrollBox组件
- 引用单元 FMXLayouts
TfxFramedScrollBox 绘制边缘(上,左,下和右),并用特殊颜色来填充控件矩形。因此相较于TfxScrollBox,TfxFramedScrollBox滚动框可以从父控件的背景中突出显示。
# 12. TfxFramedVertScrollBox组件
- 引用单元 FMXLayouts
TfxFramedVertScrollBox的作用与功能和TfxFramedScrollBox相似,与TfxFramedScrollBox组件不同的是,该组件仅有位于垂直方向上的滚动条。