组件介绍

页面布局

容器

容器的作用是通过分组和组织页面内容，实现结构化布局和视觉分隔，同时控制内容的排列方式、间距和样式，帮助提升信息的可读性和页面的整体设计效果。

应用场景

1.留白分割

留白分割的作用在于通过适当的空白区域分隔信息，提升信息的可读性和层次感，避免视觉混乱。它能让内容更清晰、更易于阅读，同时增强整体设计的简洁感和专业性。

2.分区布局分区布局的作用在于通过将界面或内容划分为不同的区域，实现信息的高效组织与展示。它能够帮助用户更直观地理解内容结构，提升信息的可读性和可用性，同时优化视觉效果，使界面更加清晰、有序。分区布局还能够根据需求灵活调整，适应不同场景和设备，从而提供更好的用户体验。

3.样式修饰

容器还常用于为页面中的其他组件添加样式，如背景色、边框、圆角、阴影等。通过这些视觉修饰，能够提升内容的美观度和层次感，使界面更加统一协调。例如在卡片、弹窗、提示框等组件中，容器常被用作样式包裹层，增强视觉聚焦效果。

常用属性

容器大小

属性	作用	默认值
宽	设置容器的宽度	80
高	设置容器的高度	80
最大宽度	限制容器的最大宽度，避免过度扩展
最大高度	限制容器的最大高度，避免过度扩展
最小宽度	设置容器的最小宽度，确保基本显示效果
最小高度	设置容器的最小高度，确保基本显示效果

容器边框

属性	作用	备注
圆角	设置容器的圆角效果
边框	设置边框样式、颜色和宽度

容器边距

属性	作用	备注
内边距	控制容器内容与边框之间的距离	操作方式和圆角一致
外边距	控制容器与其他元素之间的间距	操作方式和圆角一致

容器背景

属性	作用	备注
背景颜色	设置容器的背景颜色	支持选择主题色或自定义颜色。自定义颜色：支持输入 `#AARRGGBB` 形式的颜色值，例如 `#FF000000` 表示不透明的黑色。必须以 `#` 开头，否则将视为无效格式。

背景渐变	设置背景渐变效果	同时设置背景颜色和背景渐变则以背景渐变为准
渐变类型	渐变类型：线性渐变、放射状渐变、扇形渐变	`线性渐变`：增强方向感与结构感，适合按钮、标题等； `放射状渐变`：突出中心焦点，适合头像、卡片等； `扇形渐变`：营造旋转动感，常用于圆形图表与仪表盘。
过渡点	渐变颜色数组，至少包含两个颜色值，格式为 `#AARRGGBB`
渐变起点	渐变起始位置	仅线性渐变中使用
渐变终点	渐变结束位置，对应于渐变起点，决定渐变方向	仅线性渐变中使用
渐变中心点	渐变中心	仅放射状或扇形渐变使用
渐变半径	渐变半径，决定颜色扩散范围	仅放射状渐变使用
起始角度	扇形渐变起始角度	仅扇形渐变使用
结束角度	扇形渐变终止角度	仅扇形渐变使用

背景图片	设置容器的背景图片，支持网络或本地路径
图片填充方式	设置背景图片的适应方式	`填满容器`：保持比例，可能会裁剪部分内容（常用）； `包含`：完整显示图片，不裁剪，但可能留白； `完全填充`：强制拉伸图片以完全填满容器，不保证比例； `填满宽度`：根据容器宽度缩放，保持比例，适合横图展示； `填满高度`：根据容器高度缩放，保持比例，适合竖图展示； `按比例缩小`:如果图片大于容器则缩放，否则保持原始大小； `无`：不缩放，图片保持原始大小显示。
图片来源	设置容器的背景图片来源	网络图片或者本地图片

上下布局

上下布局是一种通过将页面内容在垂直方向上按顺序排列的方式，实现内容分区与逻辑结构清晰展示的布局形式。它通过将内容模块自上而下依次组织，帮助用户自然地按阅读顺序理解信息流，提升交互效率和信息获取的便利性。

应用场景

1.信息分层

上下布局有助于建立清晰的信息分层结构。通过标题、内容、操作等模块的上下排列，可以明确内容的主次关系，引导用户聚焦核心信息，提升阅读体验和界面可理解性。

2.模块堆叠

适用于需要多个功能模块依次展示的场景，如表单填写、步骤引导、内容展示页等。通过模块的自然堆叠，可以形成连贯的页面流程，增强界面的一致性和逻辑性。

常用属性

属性	作用	备注
主轴大小	控制容器在主轴方向上占据的空间大小
主轴对齐	控制子组件在垂直方向（主轴）上的排列方式
次轴对齐	控制子组件在水平方向（次轴）上的对齐方式

左右布局

左右布局是一种通过将内容在水平方向上进行分布和排列的布局方式，常用于并列展示信息、功能对比或主辅结构的页面设计。它强调横向空间的有效利用，使界面结构更紧凑、信息分布更清晰，有助于建立视觉对称和平衡，增强页面的整体协调性。

应用场景

1.主辅结构

左右布局常用于构建主内容与辅助功能并存的页面结构，例如左侧导航栏+右侧内容区、左侧菜单+右侧详情等。通过左右分区，能够清晰地区分主次内容，提升界面的可操作性与易用性。

2.并列信息展示

当需要对比或并列展示多组内容时，左右布局能有效避免信息堆叠，使页面更整洁有序。适用于图文对照、表格与图表并排、功能按钮分布等场景，有助于提升用户对内容的理解与操作效率。

3.增强视觉引导

左右布局可以通过合理的空间划分与视觉权重分配，引导用户的视线从左至右流动，符合多数人的阅读习惯。在设计中结合色彩、图标等视觉元素，还能进一步强化用户关注重点，优化交互体验。

常用属性

属性	作用	备注
主轴大小	控制容器在主轴方向上占据的空间大小
主轴对齐	控制子组件在水平方向（主轴）上的排列方式
次轴对齐	控制子组件在垂直方向（次轴）上的对齐方式

分割线

分割线布局通过使用分隔线（如水平线、垂直线或装饰性线条）将页面内容划分为独立区域，能够有效提升页面的层次感和信息结构，增强内容的可读性和视觉吸引力，帮助用户快速区分和理解不同功能或内容模块。

应用场景

1.分割布局

当信息条目较为复杂时，若仅使用留白分割效果有限，可通过引入线性分割，显著提升信息层次的清晰度和屏幕效率。

注意：当信息条目复杂度进一步提升，（比如已经有了线性分割，或者有更多操作），需要进一步强化信息条目本身的边界感，建议引入卡片，以强化条目信息的视觉层次和可操作性。

常用属性

属性	作用	备注
组件高度	控制容器在主轴方向上占据的空间大小	1
分割线粗细	分割线的线宽	1
左间距	起始位置的缩进	0
右间距	结束位置的缩进	0
分割线颜色	分割线的颜色	#FF000000

列表布局

列表布局通过将信息组织成条目形式，能够高效展示内容，支持模块化设计，便于用户快速浏览和查找信息，同时在不同设备上具有良好的适配性，提升可读性和用户体验。

应用场景

1.信息展示与预览

列表布局适用于需要集中展示大量同类型信息的场景，如新闻资讯、商品列表、任务清单、评论区等。通过统一的条目样式，用户可以快速浏览和对比内容，提升查阅效率。

2.动态数据加载

在需要处理海量数据的应用中，如社交媒体动态、聊天记录、数据报表等，列表布局可配合分页加载或无限滚动机制，实现流畅的数据呈现和良好的性能表现。

3.分组与筛选展示当内容需按时间、类别、状态等维度进行分类展示时，列表布局可结合分组标题、筛选控件等设计手段，使信息结构更加清晰，便于用户理解与操作。

常用属性

属性	作用	备注
数据绑定		默认渲染是遍历数组的，迭代过程中，存在一个上下文变量`index（数组索引）`，例如添加一个 `List data = []`变量，我们可以通过 `data [index]['name']`动态获取数据，其中`name`是单条数据的键名。
宽	列表的宽
高	列表的高	默认值为300
方向	垂直方向和水平方向
子元素数量	小部件的数量	如果做了数据绑定则以数据绑定的数组长度为主
自适应内容高度	是否根据内容自适应高度	使列表只占用内容所需高度，适用于嵌套列表
翻转	按相反方向排列内容
内边距	列表整体的内边距	和容器边距的内边距配置方法一致