横向分栏和纵向分栏

更新时间:

横向分栏和纵向分栏组件分别支持水平和垂直方向添加多个栏,是其他组件的容器,用于设置各组件在应用页面的相对布局位置。本文介绍横向分栏和纵向分栏组件的详细配置方法。

步骤一:添加组件

  1. 创建移动应用。具体操作,请参见创建移动应用

  2. 在移动应用编辑器中,单击最左侧的组件图标组件

  3. 在画布左侧组件列表上方,输入横向分栏纵向分栏,找到该组件,然后将组件拖拽到中间画布。

    说明
    • 在分栏组件的每个栏中,仅支持添加一个组件。

    • 不支持拖动整个分栏组件,支持拖动栏,将当前栏内组件拖放到其他栏。

    有关组件添加的详细内容,请参见添加组件布局组件

步骤二:配置样式

  1. 选中分栏组件,在移动应用编辑器右侧样式栏,配置组件样式。

    说明

    如果是分栏组件的某栏添加了新分栏组件,可通过组件的选择图层,选择目标组件。

    配置项

    说明

    分栏数量

    设置自定义分栏数量。横向分栏支持最多有4个栏。纵向分栏支持最多有99个栏。

    上外边距

    设置分栏组件上(下)边界与其他组件或栏的下(上)边界的距离。

    下外边距

    上内边距

    设置分栏组件内栏与当前分栏组件上、下边界的距离。

    下内边距

    关闭间隙

    选中关闭间隙复选框,可关闭分栏中栏的间隙。仅横向分栏组件支持该配置。

    容器样式

    设置分栏组件的填充颜色和边框样式。

  2. 选中组件的某个栏,在右侧样式中,配置单个栏的样式。

    配置项

    说明

    相对宽度

    设置分栏组件中当前栏与其他栏的相对宽度。仅横向分栏组件支持该配置。

    高度

    设置当前栏的高度。

    对齐

    该参数不显示,相应功能图标位于高度下方。

    设置栏内所有组件相对该栏的对齐方式。

    上外边距

    设置当前栏与所属分栏组件上、下边界的距离。

    说明

    分栏组件中某个栏与所属组件上或下边界的实际距离=所属分栏组件上或下内边距+该栏的上或下外边距。

    下外边距

    上内边距

    设置栏内组件与该栏上或下边界的距离。

    下内边距

    容器样式

    设置单个栏的填充颜色和边框样式。

  3. 单击页面右上方的保存图标save

  4. 预览和调试组件展示的数据和效果。具体操作,请参见预览与调试