线性布局

让布局内的组件间有一定的横向或者纵向间隔

概念说明

属性

组件通用属性请参见组件通用说明。

线性布局

• 布局模式：

  • 内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素，则该元素将会换行。
  • 块级布局：将当前元素修改为块级布局模式，各个块级布局模式的元素之前和之后均会换行。
  • 弹性布局：在弹性布局模式中，子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免溢出父元素。

• 主轴方向：

  • 横向：内部子元素进行横向排布，建议内部子元素使用行内布局。
  • 纵向：内部子元素进行纵向排布，建议内部子元素使用块级布局。

• 横轴对齐：

  • 主轴方向为横向时：支持左对齐、居中对齐、右对齐、平均分布（两端不留空）、平均分布，其中平均分布仅在弹性布局模式下展示。

  • 主轴方向为纵向时：支持左对齐、居中对齐、右对齐、占满容器宽度，其中占满容器宽度仅在弹性布局模式下展示。

• 纵轴对齐：

  • 主轴方向为横向时：支持顶对齐、垂直居中、底对齐、行内文字基线对齐、占满容器高度。

  • 主轴方向为纵向时：支持顶对齐、垂直居中、底对齐、平均分布（两端不留空）、平均分布。

  纵轴对齐仅在弹性布局模式下支持编辑。

• 是否换行：支持控制弹性布局模式下，子元素总宽度超过父级时是否换行展示，默认开启。

• 内容间隙：布局内各个组件之间的间隔，通常有收缩、无、小、正常、大，默认为正常。

• 子元素展示方式：布局内各个组件的布局方式，支持默认、行内和块级三种布局方式。

• 加载中图标：支持从图标库选择图标或上传自定义图标。

• 加载中图标旋转：支持控制加载中图标是否旋转，默认开启。

• 加载中文案：支持编辑组件加载中情况显示文案。

事件

线性布局组件支持事件列表如下：

事件名	触发条件
点击	鼠标左键单击对应组件
双击	鼠标左键双击对应组件
右键点击	鼠标右键单击对应组件
鼠标按下	鼠标任意键在组件区域内按下
鼠标释放	鼠标任意键在组件区域内释放
鼠标移入	鼠标指针移入组件区域
鼠标移出	鼠标指针移出组件区域
获取焦点	鼠标点中组件聚焦时
失去焦点	鼠标指针点击其他区域，组件失去焦点时

样式

样式说明请参见组件通用说明。

主题样式

• background：加载时遮罩背景颜色，如 #223325。只在调用openLoading方法时生效。

内置逻辑

• openLoading：打开加载状态图标。用于加载数据等需要展示loading状态时调用。
• closeLoading：关闭加载状态图标。数据加载完毕等需要关闭loading状态时调用。

示例图片

线性布局组件提供单行排布、多行排布和两端排布三种布局方式。

• 单行排布

  

• 多行排布

  

• 两端排布