---
order: 3
navTitle: 布局
---
# SuperPage布局

SuperPage布局即对整个页面组件的摆放位置的规划，通过不同组件结合各种容器组件即可实现各种布局效果的页面，比如：

| 网站首页式布局 | 信息卡片式布局 | 纵向卡片式布局 |
| ---| --- | --- |
| ![网站首页式布局](./images/2021-08-09-15-37-21.png) | ![信息卡片式布局](./images/2021-08-09-15-56-45.png) | ![纵向卡片式布局](./images/2021-08-09-16-07-06.png) |

## 页面布局{#layout}

SuperPage设计器的最底层是由画布构成的，画布上同样具有布局的属性。画布上的布局属性决定了整个页面的布局基调，画布的布局属性主要分为：

![布局属性](./images/2021-08-10-09-47-36.png)

**内部布局**：快捷设置画布中内容的排列方式，具体可参考[内部组件排列方向设置](superpage/component/panel#direction)。

**位置大小**：控制SuperPage页面宽度和高度显示，主要分为：

| 整个视图 | 横向撑满 | 固定宽度 | 手机 |
| ---| --- | --- | --- |
| ![整个视图](./images/2021-08-13-09-38-21.png) | ![横向撑满](./images/2021-08-13-09-42-11.gif) | ![固定宽度](./images/2021-08-13-09-44-11.gif) | ![手机](./images/2021-08-13-09-49-11.gif) |

- **整个视图**：宽度和高度均为百分之百铺满的布局方式，适用于展示一个满屏显示且横向纵向都没有滚动的页面
- **横向撑满**：宽度百分之百铺满，高度自适应的布局方式，适用于纵向滚动展示内容
- **固定宽度**：宽度为固定值，高度自适应的布局方式，适用于定宽展示内容
- **手机**：移动端式布局，适用于在移动端上展示内容
- **自定义**：灵活设置宽度和高度，适用于局限性不大的场景下，可以根据不同的需求自定义调整高度和宽度

**位置**：设置画布在屏幕中的位置，主要有**默认**、**水平居中**和**水平垂直居中**三个选项。显示效果分别是：

| 默认 | 水平居中 | 水平垂直居中 |
| ---| --- | --- |
| ![默认](./images/2021-08-13-13-54-26.png) | ![水平居中](./images/2021-08-13-13-56-06.png) | ![水平垂直居中](./images/2021-08-13-13-57-44.png) |

- **默认**：画布在屏幕的左上角显示
- **水平居中**：画布在屏幕顶端居中显示，当画布的**位置大小**设置为**固定宽度**或画布宽度小于屏幕宽度时，建议**位置**选择**水平居中**
- **水平垂直居中**：画布在屏幕中心显示，当画布的宽高为固定值且宽高小于显示屏幕宽高时，建议**位置**选择**水平垂直居中**

## 容器组件{#container}

容器组件内部可以摆放其他组件（**画布**本质上也是一个容器组件），容器组件具有内部布局属性设置，可以决定内部组件的布局方式。其中主要包括**面板**、**多页面板**、**滑动面板**以及**浮动面板**四类。容器组件主要是用来给**画布**划分区域的，把**画布**根据不同的内容划分为各自独立的区域，再在各自独立的区域中进行内容制作。通常情况下是，一个**画布**中放置多个容器组件，这样就可以组合出一个丰富内容的页面。那么容器组件各自的大致功能如下：

| 面板 | 多页面板 | 滑动面板 |
| ---| --- | --- |
| ![面板](./images/2020-10-09-15-40-05.png) | ![多页面板](./images/2020-10-15-14-21-20-838.gif) | ![滑动面板](./images/2020-10-21-13-55-39-733.gif) |

| 浮动面板 | 分割条 | 分割线 |
| --- | --- | --- |
| ![浮动面板](./images/2020-10-12-17-35-14.png) | ![分隔条](./images/2021-08-13-13-45-11.gif) | ![分割线](./images/2021-08-13-13-44-11.gif) |

- **面板**：用于放置其他布局容器或组件的容器，具体可参考[面板](superpage/component/panel)
- **多页面板**：多个页面展示不同页面，且可以配合便签页动态切换显示，具体可参考[多页面板](../components/layout/panelbook.md)
- **滑动面板**：同**多页面板**功能类似，但是可以自动实现循环播放，具体可参考[滑动面板](../components/layout/sliderpanel.md)
- **浮动面板**：浮动面板可以根据数据源行数浮动出多个面板，浮动出的面板功能和面板一致，具体可参考[浮动面板](../components/layout/floatpanel.md)
- **分割条**：用于分割页面的布局组件，具体可参考[分割条](../components/layout/splitline.md)
- **分割线**：同**分隔条**的作用一致[分割线](../components/layout/divider.md)

::: tip
横纵向布局设置、滚动条、绕排属性均适用于画布、容器组件，以下将以画布为示例。
:::

### 横向布局{#crosswise}

横向布局主要是用来将内容按照从左往右的规则依次进行摆放，可以横向滚动查看内容，也可以绕排查看内容，具体效果如下：

| 横向布局 | 横向滚动布局 | 横向绕排布局 |
| ---| --- | --- |
| ![横向布局](./images/2021-08-12-10-56-45.png) | ![横向滚动布局](./images/2021-08-12-11-01-11.gif) | ![纵向卡片式布局](./images/2021-08-12-11-03-33.png) |

设置方法：

- **设置画布内部布局**：在**画布**>**内部布局**中选择**横向**，选择**横向**后，系统会自动默认设置布局中其它对齐属性，包括**方向**、**横向对齐**、**纵向对齐**、**滚动条**、**绕排**，具体可参考[面板对齐设置](../components/layout/panel.md#alignment)

![横向布局](./images/2021-08-10-14-07-02.png)

### 纵向布局{#lengthways}

纵向布局正好与横向布局相反，纵向布局是将内容从上往下依次进行排列，纵向布局具体效果如下：

| 纵向布局 | 纵向滚动布局 |
| ---| --- |
| ![纵向布局](./images/2021-08-12-11-11-00.png) | ![纵向滚动布局](./images/2021-08-12-11-13-11.gif) |

设置方法：

- **设置画布内部布局**：在**画布**>**内部布局**中选择**纵向**，选择**纵向**后，系统会自动默认设置布局中其它对齐属性，具体属性可参考[面板对齐设置](../components/layout/panel.md#alignment)

![纵向布局](./images/2021-08-10-14-16-43.png)

### 滚动条{#scrollbar}

放置的内容超出屏幕的宽或高的时候，可以设置一个滚动条辅助查看页面内容，滚动条主要分为：

- **无**：默认无滚动条
- **横向滚动**：当页面内容超出屏幕的宽度时，且需要进行横向拖动查看内容。可以添加横向滚动条辅助查看
- **纵向滚动**：当画布高度固定时，内容排列布局超出了屏幕高度时，可以添加纵向滚动条辅助查看
- **横纵向滚动**：同时需要横向或者纵向查看时，可以添加横纵向滚动条辅助查看

### 绕排{#winding}

页面内容的**绕排**设置通常是跟**横向布局**结合使用的，当内容横向排放时超出屏幕宽度且不需要横向滚动查看内容时，我们就可以考虑设置**绕排**。**绕排**主要分为：

- **不绕排**：默认内容不会进行绕排排列
- **绕排**：超出**画布**的内容，会按照设置的布局方向换行依次排列
- **反向绕排**：**反向绕排**是**绕排**镜像的对称

## 组件位置大小{#location}

组件位置大小主要是用来控制组件在画布中的放置的位置，宽高度以及是否伸缩。

### 相对位置{#relative}

**相对位置**表示子组件相对于父容器的一种位置状态，且兄弟组件之间会出现挤压但不会覆盖的情况，处理规则如下：

1. 设置了**相对位置**后，子组件会自动计算与其它子组件和父容器之间的位置间距
2. 当父容器放大缩小时，系统会根据父容器放大缩小的范围重新计算各个子组件与子组件之间，以及子组件与父容器之间的位置间距
3. 子组件与子组件之间也会在位置距离不够的情况下互相挤压
4. 所有的子组件都会受到父容器内部空间大小和自己本身宽高设置中最大最小值的约束

依据上诉规则，最终形成一种弹性布局的效果。

![相对布局](./images/2021-08-12-16-58-11.gif)

### 绝对位置{#absolutely}

**绝对位置**不会出现兄弟组件之间相互挤压的情况，但是会在特定情况下受父容器挤压，处理规则如下：

- 设置了相邻两个边的间距属性，比如设置了左和上，此时子组件会固定在父容器的左上角，缩放父容器时不会对子组件造成挤压或拉伸
- 设置了相对两个边的间距属性，比如设置了上和下，此时缩放父容器会对子组件的宽度造成挤压或拉伸，反之亦然
- 四边均设置间距属性，此时子组件的宽高均受父容器的挤压或拉伸

![绝对位置](./images/2021-08-12-17-04-11.gif)

### 撑满父容器{#full}

**撑满父容器**是将父容器布局方向中剩下的空间进行挤占，比如下图为横向布局，画布中的内容会将横向剩余空间全部进行挤占。这是一种比较快捷的设置组件位置的方法。

![撑满父容器](./images/2021-08-12-17-09-11.gif)

### 宽高和伸缩{#size}

宽高的设置可以控制组件在父容器中的所占位置大小，通过不同设置也可以实现弹性宽高。宽高的主要如下：

- **自适应**：这种设置方式会根据组件中的内容自动设置宽高，也可以设置最大、最小值来控制组件自动生成的大小。如果均不设置，组件就是一种弹性伸缩状态，可以理解为父容器的大小无限伸缩。这是一种常用的设置方式
- **像素**：这是一种固定大小的设置宽高的方式，且这种设置方式不会随浏览器的大小自动伸缩
- **百分比**：将宽高设置为百分比之后，就是计算子组件在父容器中的百分比大小，这种设置方式也是一种弹性设置方式
- **伸缩**：如果将**伸缩**选项设置为**是**，子组件就会自动将父容器剩余的空间占满。该属性的优先级高于上诉三种宽高设置的优先级

## 移动设备布局{#mobile}

SuperPage是支持设置移动布局，实现在移动端查看的需求。设置移动布局的方法有两种，分布是：

| 空白移动模板 | 手机布局 |
| ---| --- |
| ![移动模板](./images/2021-08-10-15-08-32.png) | ![移动布局](./images/2021-08-10-15-11-31.png) |

1. 方式一：新建SuperPage页面时，系统内置了**空白移动模板**，选择**空白移动模板**即可
2. 方式二：pc页面下，在**画布**>**位置大小**中选择**手机**布局即可

### 移动端屏幕展示方向{#direction}

**屏幕方向**：设置移动端画布展示方向，方向包括**自适应**、**横向**和**纵向**三种。在**画布**>**位置大小**>**屏幕方向**中设置

## 常用布局技巧{#skill}

### 快速定位父容器（组件）{#locate-parent}

在布局中经常会遇到需要修改某个父容器（组件）属性的情况，定位父容器（组件）的办法有两种，分别是：

1. **组件大纲树**：可以通过组件大纲树去快速定位父容器（组件），在左上角的**文件**>**显示/隐藏组件大纲**即可打开大纲树,此方式适用于多种容器复杂嵌套情况
2. **ESC定位法**：通过选中子组件，然后按下ESC键可逐层向上选中父容器（组件），此方式适用于简单嵌套情况

| 组件大纲树 | ESC定位法 |
| ---| --- |
| ![组件大纲树](./images/2021-08-10-16-27-02.png) | ![ESC定位法](./images/2021-08-12-14-11-11.gif) |

### 快速移动组件{#moving}

将一个组件从容器A拖入到容器B且此时的容器之间的嵌套比较复杂，可以利用组件大纲树实现快速移动组件，方法如下：

![大纲树移动法](./images/2021-08-12-14-20-11.gif)

## 常用布局效果{#scene}

### 工字型布局{#shape}

工字型布局可以将页面分为页头，侧面导航栏、内容栏和页脚栏四部分。适用于制作网页式的布局页面。

| 工字型布局 | 网页工字型 |
| ---| --- |
| ![工字型布局](./images/2021-08-12-14-28-10.png) | ![ 网页式](./images/2021-08-09-15-37-21.png) |

设置方法：

![设置方法](./images/2021-08-12-15-06-11.gif)

1. **画布**>**内部布局**选择**纵向**
2. **画布**中拖入三个**面板**，其中放置侧面导航和内容栏的内容面板需要是纵向布局的面板，可以直接选择**横向布局**组件或者拖入**面板**后将**内部布局**设置为横向布局。页头面板和页脚面板的宽度设置成`百分之百`，高度自适应，中间面板的**伸缩**设置为`是`
3. 在内容面板中分布再拖入两个**面板**，宽度根据实际情况进行设置
4. 再在各个容器中放入实际需要的组件即可

### 卡片式布局{#card}

卡片式布局可以清晰的将各种信息工整的展示出来，适用于企业信息展示。

| 卡片式布局 | 企业信息卡片 |
| ---| --- |
| ![卡片式布局](./images/2021-08-12-15-25-18.png) | ![ 企业信息卡片](./images/2021-08-09-16-07-06.png) |

设置方法：

![设置方法](./images/2021-08-12-16-48-11.gif)

1. **画布**>**内部布局**选择**纵向**
2. **画布**中拖入一个**面板**（**内部布局**设置为纵向布局）**纵向布局**作为父面板，高度根据实际情况而定
3. 父面板中根据信息展示行数数量拖入相应数量的**面板**（**内部布局**设置设置为横向布局）或**横向布局**作为子面板1，**内部布局**>**伸缩**设置为`是`
4. 子面板1中根据信息展示列数数量拖入相应数量的**面板**（**内部布局**设置设置为横向布局）或**横向布局**作为子面板2，**内部布局**>**宽度**设置为`百分之五十`，**内部布局**>**纵向布局**选择**居中**
5. 子面板2中拖入**单行文本**显示信息即可

::: tip
我们可以先布局好一行

再按住Ctrl键，选中组件拖动，快速复制组件
:::