# 1 用户场景 很多客户在使用苍穹平台设计器进行界面设计时，对布局的知识不够了解，导致设计出来的界面有不够美观。本篇知识以平台预置的动态表单模板对话框为需求原型，介绍前端布局设计的主体步骤。 # 2 操作步骤 ## 2.1 界面规划 对话框原型界面整体为垂直布局，可以分为两块区域：内容区和按钮区  ## 2.2 设置布局方式 对话框结构为上下结构，所以布局方式采用垂直布局的方式比较适合。选中根节点，调整其布局方式为垂直布局、水平充满，并修改其宽、高度等属性。设计器布局页签有快捷的布局选择，点击选中即可。  ## 2.3 使用布局控件 布局控件有Flex面板，高级面板，字段布局面板等。高级面板带有操作功能的标签栏，字段布局面板适合放多个字段的布局。在页面元素大纲选中根节点，在控件工具箱中找到Flex面板，添加两个Flex面板作为内容区和按钮区。  添加完成后按需要调整两个Flex面板的高度，将按钮区的Flex面板设置高度为50px，并将Flex面板的扩展比率设为0，这样整体的布局就完成了  ## 2.4 放置业务字段/控件 整体布局设置好之后，即可在相应的容器控件中添加字段或控件，并调整相应容器控件的布局和控件的属性。 接下来选中下面的Flex面板，添加两个按钮，然后调整按钮的样式，给第二个按钮设置背景色。完成后后将面板的布局设置为水平布局，对齐方式设置为中间对齐。  完成设计之后，点击“保存”即可将设计好的页面元数据保存至数据库中。点击“预览”即可实时查看运行态界面，即最终上线之后用户所看到的界面。  # 3 注意事项 *1. 添加控件前，需选中其父容器控件。否则，添加的控件会放置在当前鼠标焦点所在的容器控件中* *2.设计时每个Flex面板都是一个可设计的容器，可以按需要调整里面内容的布局方式* *3. 本示例只是介绍简单的场景，实际的布局可能复杂得多，这需要设计者理清布局的层次，每层布局要特别留意**扩展比率**以及**压缩比率**是否设置准确，以免得不到想要的布局效果* # 4 相关链接 1.[Flex布局属性介绍](https://vip.kingdee.com/article/234324980790310912) 2.[Flex布局实践](https://vip.kingdee.com/article/234329509498235648)