使用场景
页面内容在水平方向进行分割，且布局比例固定。例如对于应用的工作台首页，左侧为快捷导航，右侧为轮播窗口，则需要使用布局容器对页面组件所在列比例进行固定配置。电商订单管理中心后台首页示例：顶部展示欢迎横幅，左侧快捷导航区域提供订单管理、商品管理、促销管理、类目管理等功能入口；下方数据看板区域包含近7天下单趋势和交易漏斗；右侧展示轮播广告位和待处理事项模块（含角标数字提示）。页面右上角提供布局容器下拉按钮，可对页面模块进行添加或删除操作。
使用说明
页面编排功能支持在某个容器内或整个页面内拖入布局容器，组件默认将所在区域分为2列，并预置了多种布局方式，同时也支持自定义布局。
通过调整列比例，您可实现不同比例分列的布局模式，在列比例n_1 : n_2 : ... : n_N中，n_1+n_2+...+n_N=12。您也可以通过列间距来调整每列之间的距离大小。
使用示例
-
将布局容器拖入画布后，默认列比例为
6:6。在可视化页面搭建器中，选择布局容器组件，右侧属性面板的布局区域选中两列均分布局，列比例为6:6，列间距为 16 px。 -
选择目标布局容器（选择目标布局后，在其属性下方选择父层级布局容器），在列比例中选择默认四列的布局，则可以看到列比例变为
3:3:3:3。 -
自定义布局容器的列比例。选择目标布局容器，修改为目标列比例，您可看到画布中目标布局容器分列比例实现对应变更。
该文章对您有帮助吗？