FMX窗口布局和普通delphi VCL或者lazarus LCL布局差距巨大.最近花了点时间摸索下.

 

需求

最近需要用DELPHI写点小工具.然后使用FMX.虽然之前也用过,但是就是随便放的控件.没有研究布局.

使用过程发现布局和DELPHI VLC 或者 lazarus LCL差距很大.

 

比如窗口底部的状态栏,显示3行信息.

如果是DELPHI VLC 或者 lazarus LCL 这里有添加子StatuPanel的对话框.

而FMX这里没有.

必须这里自动添加子控件 Label ,然后你还要研究怎么对齐问题.

然后发现里面有个GridPanelLayout布局组件.

 

 

StatusBar组件

 

子组件关系

StatusBar
　﹄　GridPanelLayout
　　　　　﹄　Label1
　　　　　﹄　Label2
　　　　　﹄　Label3

 

StatusBar下就一个子控件GridPanelLayout

GridPanelLayout下面3个Label . (除了label还可以放入其他组件,比如进度条)

 

GridPanelLayout设置

 

1行,3列.每列宽度可以自定.

 

每列正好绑定一个Label

 

GridPanelLayout的align选Client (也就是完整填充整个StatusBar的)

 

右边,外边距20,预留给状态栏右边那个类似SizeGrip.(拖动窗口大小用的)

 

操作大概见下图

 

 

列宽

上面是单行的情况,比较简单.现在开始整复杂的了.

 

现在要来2列,3行.

 

列宽模式

 

列宽或者行高都有3种模式.

1, 百分比

2,绝对值

3,自动

 

我这里设置左边是100%比例.右边是绝对值150.

也就是窗口无论如何改变大小,右边固定150 (只要窗口宽度大于150 那么 右边部分可以完整显示,左边看比例.更多列的操作一样)

 

 

 

演示

 

正常窗口

 

将窗口缩小后

 

右边部分是固定宽度的,左边是根据窗口自动调整的.

 

 

相同的,行高,第一行因为是我用作标题的,所以第一行的高度我也是按绝对值设置的.

 

组件跨网格

 

前面布局过程就会发现一个问题,就是多行,多列.  整列或者整行的宽度或者高度是相同的.

 

布局过程中,总有些组件需要放多个网格里.比如我窗口有个Logo图片.

如果放左边,就无法实现相对窗口,居中对齐的情况.

 

所以组件需要占用左右两格.

 

 

操作

先个logo套一个父级组件,我用的TLayout

起始列是0列,占用列数2.

起始行是1行,右边

 

 

然后内部图片居中即可.

窗口宽度改变的时候,LOGO图片也会等改变,而且固定居中.

 

 

 

 

跨平台

 

经过测试,在ubuntu和MAC OS上,均能正常完美显示.更换皮肤也正常.

 

 

换了另外一个皮肤

 

 

 

参考

 

我参考了他这个DEMO

大家也可以试试,有代码下载.

https://www.cnblogs.com/onechen/p/6213700.html