布局控件是用于组织页面整体结构、控制内容排列的容器类组件。通过组合使用不同的布局控件，您可以高效地搭建从简单到复杂的页面版式，实现模块化管理和响应式设计。
控件选型指南
下表对比了不同布局控件的核心特性及适用场景。
控件名称 | 核心特性 | 典型适用场景 |
基础的块级容器，提供独立的样式（背景、边框、阴影）和尺寸控制能力。 |
| |
宽度始终为100%，自动撑满其所在的父容器宽度。高度可自定义或由内部内容撑开。 |
| |
实现Tab切换效果。由“标签页导航”和“内容面板”两部分组成，用户点击不同标签可切换显示对应的内容面板。 |
| |
横向分栏布局。您可以自定义栏数、各栏的宽度比例以及栏与栏之间的间距。 |
|
通用操作
添加布局控件
| 删除布局控件
|
图标，或直接按键盘上的 设置布局控件
容器
容器是最基础的布局单元，可作为其他控件的包裹层，用于创建独立的视觉区域并统一设置样式。
单击容器控件后，您可以在弹出的设置面板中进行以下配置：
排列：精确调整容器的宽度、高度及其在页面中的位置坐标。
动效：为容器设置入场动画效果，例如淡入、移入等。
样式：为容器设置颜色或图片背景、边框样式以及阴影效果，以增强立体感。
自适应布局
自适应布局用于创建宽度撑满父容器的通栏区块，常用于页面顶部的导航栏或底部的页脚。
单击自适应布局控件后，您可以在弹出的设置面板中进行以下配置：
排列：设置自适应布局的高度和垂直位置。其宽度始终自适应父容器，不可手动设置。
样式：为该布局切换样式，设置通栏背景（撑满浏览器窗口宽度的背景颜色或图片）、边框及阴影。
标签布局
标签布局通过Tab切换的形式，在有限空间内展示不同分类的内容。
单击标签布局控件后，您可以在弹出的设置面板中进行以下配置：
排列：调整整个标签布局控件的大小和在页面中的位置。
编辑：
添加标签：增加标签页。
：修改在导航区显示的标签文本和背景、为标签设置跳转链接及其打开方式（如新窗口打开）。
：删除标签页。
交互：设置切换标签页的方式为鼠标单击切换或鼠标悬停切换。
样式：
标签设置：分别设置标签在默认、悬停和选中状态下的背景、字体颜色等。
区域内容设置：设置内容面板区域的背景、边框等。
阴影：为整个标签布局控件添加阴影。
多栏布局
多栏布局可将内容水平分割为多栏，适用于创建侧边栏、卡片列表等左右结构。
单击多栏布局控件后，您可以在弹出的设置面板中进行以下配置：
排列：调整整个多栏布局控件的高度和垂直位置。其宽度始终自适应父容器，不可手动设置。
编辑：
添加栏目：增加布局的列数。
- ：为单个栏目设置独立的背景。
- ：删除栏目。
样式：
宽度：选择通栏（撑满浏览器窗口）或页面宽度（与页面主体内容对齐）。
比例：设置各栏的宽度比例，可选择均分或手动调整比例。
列间距：调整相邻两栏之间的水平间距。
背景：为整个多栏布局设置统一的背景。
使用布局控件时，建议关注控件的层级关系，以理清页面结构。
将容器控件放入标签布局控件中，再在容器中放置按钮、图片等控件，可实现更丰富的导航样式。