Delphi App开发分享（四） - 界面布局介绍

1、先看几个布局效果，动态图片来自【龟山Aone】的博客：https://www.cnblogs.com/onechen/

TLayout.gif

TGridLayout.gif

2、Delphi的布局控件页

布局控件页.png

3、布局相关属性介绍：

1）Align属性：控件的Align属性决定了当父控件的四条边，或中心，全部初始或父控件重新调整过尺寸时，控件是否自动重新排列或/重新调整尺寸。Align属性的默认值为alNone，意味着不自动计算：控件永远停留在原来的地方。
Align属性的典型值如下（蓝色的区域表示是子控件）：

1369241593_6789.png

如果你使用alTop，alBottom，alLeft，alRight，其他组件的Align属性使用剩余的区域。
剩余区域的大小和形状（alClient）也随着设备的排列方向而改变，也基于窗体类型（iPhone或iPad）。
下图展示了当你有两个组件使用alTop，一个组件使用alClient的情况下，横放（水平）和竖放（垂直）的布局。

1369241593_9400.png

2）Margins属性
Margins确保控件由父控件自动排列时与各控件之间的距离。
在下图中，左路边的组件（alClient）使用Margins属性来确定组件四周的空隙。

1369241594_8364.png

3）Padding属性

Padding设置父控件内容盒子的边距。在ObjectInspector，你可以为Padding设置值（像素）：Left、Right、Bottom、Top，在下图中，父组件（包含两个区域）使用Padding属性来确保内部的边距：

1369241615_7997.png

4）Anchors属性
如果你在ToolBar的上方有一个Edit控件，你可能想要在Edit控件的右边和窗体的边（ToolBar）保持固定的距离。Anchors能让你来指定控件相对于父控件的边保持固定的距离。

如果你想要Edit控件与ToolBar（它的父控件）保持相应的位置，你可以设置Anchros属性为akLeft，akTop，akRight。当ToolBar调整过尺寸时，Edit控件也会根据Anchors设置来调整大小：

1369241616_7312.png

1369241616_7709.png

这些都是一些基本知识，这边主要是从网络上找了一些其他朋友的介绍集中一下分享给大家，让大家先有个概念，知道在delphi里面大概是什么进行App的布局的。后续会有比较完整的Demo演示。

Delphi App开发分享（四） - 界面布局介绍

推荐阅读更多精彩内容