/LGC设计模式/GUI 系统中的 Layout

GUI 系统中的 Layout

作者:
刘鹏

日期:

2008-11-26

Layout 是看不见的容器组件，它可以包含 widget，并且能够根据窗口大小自动调整 widget 的位置和尺寸。本文总结了一些主流 GUI 系统 Layout 的设计思路和特色。

layout 简介 GUI 程序的界面一般由若干 widget 组成，如何处理这些 widget 的位置和大小 是很重要的问题。最简单的方法是事先计算出每个 widget 的大小和坐标，然后 应用程序直接设置每个 widget 的位置和大小，每个 widget 的大小和坐标都以 硬编码的方式出现在应用程序代码中。 这样做有很多缺点，比如，窗口大小改变后，各个 widget 的坐标需要重新手工 计算，没有自适应能力；某个 widget 的位置变了或者更换了 widget，所有 widget 的坐标和大小都要重新计算，没有复用性；另外，手工计算各个 widget 的坐标和尺寸非常烦琐，并且容易出错。 Layout 就是为了解决 widget 的布局问题而出现的。Layout 是看不见的容器组 件，它可以包含 widget，并且能够根据窗口大小自动设置 widget 的位置和尺 寸。使用 Layout 开发 GUI 应用，你只需关心 widget 之间的相对关系 (如上、 下、左、右)就可以了，各个 widget 的坐标和尺寸由 Layout 根据窗口大小实 时计算。 GTK 中的 layout1 GTK 采用 Packing Box 来实现 layout。这些 box 是不可见的 widget 容器，GTK 提供了三种 box： hbox：widget 在水平方向由左到右或由右到左插入； vbox：widget 在竖直方向由上到下或由下到上插入； table：widget 按表格方式排列。 通过使用这些 box，GTK 知道如何排列 widget，所以可以实现自动的 resizing。 SWT 中的 Layout2 SWT 的 layout 控制内部界面元素的位置和尺寸。layout 类是抽象类 layout 类的子类。SWT 提供了几个标准 layout 类，如 FillLayout, RowLayout, GridLayout 或者 FormLayout；你 也可以写自己的 layout 类。 一般情况下，positioning 和 sizing 不会自动发生。应用程序决定了内部界面元素的初始 size 和 position。若使用 layout，layout 就可以 position 和 size 内部界面元素。 SWT 中提供的 layout 包括： FillLayout：在一个单行或列上，布局相同尺寸的 widget； RowLayout：在一行或多行上，fill, wrap，spacing widgets； GridLayout：在一个 grid 上 layout widgets； FormLayout：layout widget by creating attachments for each of their sides. FillLayout 是最简单的 layout 类。它将 widget 布局在一行或一列上，将它们设置成相同的大小。初始状态下，所有的 widget 的高度取最高的 widget 高；所有 widget 宽度取最宽的 widget 的宽。FillLayout 不能 wrap ，也不能设定 margin 或者 spacing。FillLayout 可以用于任务栏、工具条、checkbox 等。当容器仅仅包含一个 child 时，也可以使用 FillLayout。 RowLayout 比 FillLayout 更加常用，它支持 wrap，margin 和 spacing。RowLayout 有大量的配置项 (RowLayoutConfiguration Fields)。另外，RowLayout 中每个 widget 的宽、高都可以使用 widget 的 RowData 对象来设定。 RowLayoutConfiguration Field 包括： type：horizonal or vertical，it is horizonal by default； wrap：当行长度不够用时，widget 是否可以 wrap 到下一行； pack：widget 使用 natural size 还是 Fill available space. justify：widget 是否可以随容器大小的改变而改变自己的大小； marginLeft，marginTop，marginRight，marginBottom，spacing：设置 margin 和 space; GridLayout 可以把 widget 以网格方式布局。GridLayout 有大量的配置项，每个 widget 也可以有自己的 layout data object (GridData)。 GridLayout 的强大就在于使用 GridData 来控制 widget 。 GridLayout Configuration Field 包括： numColum: layout 中的列数。当一行中的 widget 个数超过列数时，就会产生新的一行; makeColumnsEqualWidth: 将列设置为等宽； marginWidth, marginHeight, horizontalSpacing 和 verticalSpacing：margin 和 spcace 的设置项。 SeeAlso Packing Widgets in GTK+ Understanding Layouts in SWT