[]
自由布局是一种布局容器，是在设计和排版中常见的布局方式，允许您自由地放置和调整项目的位置，而不受固定网格或结构的限制。自由布局支持像素级调整和自定义层级关系，满足您的个性化界面设计需求。
选择一个单元格或单元格区域，然后在单元格类型中选择自由布局，双击或者拖拽自由布局容器至单元格区域中。
选中自由布局容器，在属性设置区中选择“单元格设置”标签页，设置说明见下表。
设置 | 说明 |
|---|---|
容器溢出模式 |
|
禁用 | 设置是否禁用自由布局容器。勾选“禁用”后，容器内的所有项目均不可以点击，且文字颜色会变灰。 |
不可见 | 设置是否隐藏自由布局容器。勾选“不可见”后，容器将被隐藏。 |
注释 | 自由布局容器单元格的注释，具体可参见单元格基本操作的“新建注释”。 |
选中自由布局容器，右击，在右键菜单中可进行如下的操作：
选中自由布局容器时，会在设计器的右下角显示容器的宽高；
选中自由布局容器中的项目时，显示其位置及项目的宽高。
在单元格类型列表中，选择一个，将其拖拽到自由布局容器中。
拖拽单元格类型时，您可以看到在其四周显示的红色对齐线及与上、下、左、右四个方向的距离，单位为像素。
选择一个项目，在右侧的单元格设置中，单击“项目在容器内的布局”超链接，打开如下的对话框。
设置 | 说明 |
|---|---|
约束（固定） | 设置容器中当前项目的锚点模式，默认为“靠左、靠上”。 |
左（像素） | 设置与左边界的距离。 |
上（像素） | 设置与顶部边界的距离。 |
宽度（像素） | 设置当前项目的宽度。 |
高度（像素） | 设置当前项目的高度。 |
项目容器的CSS类名 | 设置运行时包裹当前项目的 div 的 CSS 类名，以调整项目容器的外观。具体可参见使用CSS。 |
当约束中的“靠左”和“靠右”都勾选时，“宽度（像素）”设置将隐藏， 显示“最小宽度（像素）”；
当约束中的“靠上”和“靠下”都勾选时，“高度（像素）”设置将隐藏， 显示“最小高度（像素）”。
方法一：
选中容器中的项目后，在“项目在容器内的布局”中调整项目的宽度、高度或移动项目。
方法二：
选中容器中的项目后，会在项目的周围出现控制点，将鼠标悬停到控制点上时，鼠标会变成双向箭头，此时您就可以调整项目的大小。
当鼠标在项目区域变成四向箭头时，直接拖拽项目即可移动其位置。
选中自由布局容器中的项目，右击，在右键菜单中可进行如下的操作。
其中，上移、下移、置顶、置底是用于调整项目层级的操作。这些操作可以帮助您在项目重叠的情况下控制项目的显示顺序。
例如当多个项目重叠时，通过调整层级可以控制哪个项目显示在前面。
但同时选中多个项目调整层级时，项目之间的相对层级顺序不会改变。
1. 选择一个单元格区域，设置单元格类型为图文列表。
2. 设置数据绑定，绑定数据源。
3. 编辑模版。
① 设置模板页为1行1列，行高和列宽均为180像素。
② 将自由布局容器拖拽至模板页。
③ 将图片拖拽到自由布局容器中，设置关联列为“图片”，图片的显示模式为“原始尺寸”。
④拖拽一个文本至自由布局容器中，设置显示文本为“余”。
⑤拖拽第二个文本至自由布局容器中，设置关联列为“最终库存数”。
⑤拖拽第三个文本至自由布局容器中，设置关联列为“名称”。
⑥ 调整下容器内各个项目的位置后，在结构树中选择三个文本项目，设置填充色、文本靠右对齐，并右击，在右键菜单中选择“置顶”。
这样，三个文本项目就叠在了图片项目的上面。
4. 运行后，在浏览器中显示如下。可以看到三个文本项目叠在了图片的上方。
