---
title: 画布适配与布局
source: https://vjmap.com/guide/visual/layout.html
---

---
group: 搭建页面
description: 选对布局画像和适配方式，让大屏在各种屏幕上铺满不变形；用布局组件搭骨架，用锚点和百分比让组件随窗口变化。
---

# 画布适配与布局

做好的大屏要放到各种屏幕上：指挥中心的拼接屏、会议室投影、办公电脑、平板，甚至手机。屏幕比例千差万别，所以每个页面都要回答两个问题：

- **整张画布怎么放进窗口**：等比缩放、铺满、拉伸，还是跟着窗口变宽变窄？这由页面的「布局画像」和「适配方式」决定。
- **画布里的组件怎么排**：自由摆放，还是按行、列、格子自动排列？这由布局组件和组件的「响应式布局」设置决定。

## 新建时先选对模板

在首页点「新建」，「新建大屏」对话框左侧按布局分类列出模板。选「画布定位」看看：

![「新建大屏」里的画布定位模板](./images/layout-new-templates.webp)

1. **模板分类**：全部、示例模板、画布定位、流式布局、空白。
2. **固定大屏**：1920×1080 设计稿，播放时整张等比放进窗口，最常用。
3. **指挥中心 · 三栏**：固定大屏，自带顶栏加左中右三栏的格子骨架，点格子放组件。
4. **竖屏长卷 · 纵向滚动**：1080×1920 竖版，按宽度铺满，超出的部分上下滚动，适合竖屏海报、触摸屏门户。
5. **超宽条屏 · 横向滚动**：5760×1080 横条，按高度铺满，超出的部分左右滚动，适合 LED 横带、拼接条屏。
6. **组态大屏**：整页组态画布，进去就能用图元库拼工艺流程，见[组态](./scada.html)。
7. **自适应画布 · 百分比**：带「响应式」角标。组件可以自由摆放，但位置和大小按百分比记，窗口变了组件真的跟着变大变小，不缩放、不留黑边。

每张卡片下面的两个小标签说明编辑和预览方式：「编辑：自由拖放」是随便摆，「编辑：流式」是自动排；「预览：整体适配」是整张画布缩放进窗口，「预览：跟随窗口」是页面就等于窗口大小。

「画布定位」里还有「仪表盘 · 四宫格」（自适应画布 + 2×2 格子）。「流式布局」分类有两个模板：「流式卡片墙」卡片自动排列、窄屏换行，「滚动长页 · 报表」纵向堆叠、内容超出时滚动。

::: tip 怎么选
- 投到大屏、投影，按设计稿还原 → **固定大屏**。
- 地图、三维、组态做主画面，两边配侧栏 → 示例模板里的「示例 · CAD 图纸 / 互联网地图 / 组态监控台 / 三维巡检」，主画面会自动占满中间。
- 窗口大小不固定，又想自由摆放 → **自适应画布 · 百分比**。
- 卡片墙、报表长页，手机上也要看 → **流式卡片墙** 或 **滚动长页**。
:::

新建以后这些都还能改：点画布空白处选中页面，在右侧属性面板里改。

## 页面的布局画像与适配方式

选中页面（点画布空白处，或点图层最上面的页面名称），属性面板最上方是页面的布局设置：

![页面的布局画像、适配方式与高级开关](./images/layout-page-props.webp)

1. **布局画像**：页面的根本性质，有三种：「固定大屏」「自适应 · 百分比」「流式 · 长页」。
2. **适配方式**：固定大屏才有，决定整张画布怎么放进窗口，见下表。
3. **说明**：橙色文字解释当前适配方式的效果和注意事项，下面两个标签是编辑方式和预览方式。
4. **大屏尺寸与填充颜色**：设计稿的宽高（如 1920×1080）；填充颜色用来填画布外露出的空白。
5. **高级 · 手动布局开关**：展开后有「全屏适配方式」「自动填充剩余空间」和「内部组件布局」（静态 / 流式），一般不用动。

固定大屏的适配方式有七种：

![适配方式的七个选项](./images/layout-fit-modes.webp)

| 适配方式 | 效果 | 适合 |
|---|---|---|
| 等比缩放 · 留边(居中) | 整页等比缩小放进窗口，不变形、内容完整；比例不一致时四周留边 | 投屏、像素级还原；把填充颜色设成和背景一样的深色，留边就看不出来 |
| 等比铺满 · 不变形(背景填满) | 不变形，多出来的区域不留黑边，交给组件去占 | 新建固定大屏的默认值，大多数场景用它 |
| 裁切铺满 · cover | 等比放大铺满窗口，贴边的内容会被裁掉 | 背景、地图铺满全屏 |
| 拉伸铺满 | 横竖分别缩放，铺满但会变形 | 只投一块比例固定的屏 |
| 宽度铺满 · 纵向滚动 | 按宽度铺满，超出的高度上下滚动 | 竖屏长卷、门户 |
| 高度铺满 · 横向滚动 | 按高度铺满，超出的宽度左右滚动 | LED 横带、拼接条屏 |
| 原始 1:1 | 不缩放，居中显示 | 调试、小画布 |

选「等比铺满」时，多出来的区域由组件来占：可以给组件设横向、纵向布局（见下文「让组件跟着窗口走」），或者打开「自动填充剩余空间」，平台会把地图、三维、组态、表格、布局容器这类主画面拉大，吃掉多出来的空间。切到等比铺满时，自动填充会帮你打开。

::: warning 注意
等比铺满下画布始终等于窗口，所以没有「溢出滚动」。内容本来就比设计稿长、需要上下滚动时，改用「宽度铺满 · 纵向滚动」。
:::

## 流式页面

布局画像选「流式 · 长页」时，组件不再按坐标摆放，而是从上到下（或从左到右）自动排列，窗口变窄时自动换行或回流。示例「布局示例 · 流式纵向自适应仪表盘」就是这样做的：表头、一排 KPI 卡、主图从上往下排，主图自动吃掉剩下的高度。选中页面后属性面板如下：

![流式页面的设置](./images/layout-flow-props.webp)

1. **布局画像**：流式 · 长页。
2. **说明**：卡片墙、移动端友好、可滚动长页；编辑方式是「流式」，预览「跟随窗口」。
3. **排列方向**：横向或纵向。整页从上到下排选「纵向」。
4. **自动换行**：放不下时是否换到下一行（列）。
5. **间隔**：组件之间的距离，「固定」用下面填的像素值，「自适应」让组件两端对齐、间隔自动分配。
6. **内部组件对齐**：水平方向靠左、居中、靠右；垂直方向靠上、居中、靠下。
7. **内边距**：页面四周留白。
8. **溢出滚动**：内容超出页面时隐藏、纵向滚动或横向滚动。报表长页选「纵向滚动」。

::: warning 注意
整页「纵向」排列时，「自动换行」要设成「不换行」，否则内容一超高，后面的组件会换到右边一列去。
:::


## 大、中、小三档屏幕

顶栏右侧有「大」「中」「小」三个按钮，切换编辑时模拟的屏幕宽度：

![切到「小」，按手机宽度预览和编辑](./images/layout-size-modes.webp)

1. **尺寸模式条**：「大」是电脑大屏，「中」是平板（预览宽 1024），「小」是手机（预览宽 375）。后面的输入框是预览宽度和高度，可以改。
2. **收窄后的画布**：流式页面切到「小」，画布变成手机宽，组件重新排列，KPI 卡一行放不下就挤到下一行或缩窄。

三档的关系：

- **大屏是基础**：在「大」档改的设置，所有屏幕都用。
- **中、小只记差异**：切到「中」或「小」再改某个设置，只在这一档生效。比如手机上把字号调大、把次要的组件关掉。
- **按设备隐藏**：组件「响应式布局」组里的「本设备显示」，在某一档关掉，这个组件就只在这一档不显示，图层里仍然保留。

发布以后，平台按访客的窗口宽度自动套用对应的一档：默认窗口宽 768 像素以下算手机，1280 像素以下算平板，再宽算大屏。

::: tip 小技巧
固定大屏也能按档改字号、配色、显示隐藏，但组件的位置和大小在三档里是同一套，靠整页缩放和锚点适配。手机上需要完全另一种排法时，单独做一个流式页面更省事。
:::

## 布局组件

组件库的「布局」分类有 9 个容器组件，用来不写坐标就切出规整的骨架：

![组件库「布局」分类](./images/layout-components.webp)

1. **布局分类**：左侧大分类里的「布局」，共 9 个。
2. **标签**：按「栅格」「流式」「固定」「外壳」筛选。
3. **布局组件**：悬停点「+」或拖到画布上。

| 组件 | 做什么 |
|---|---|
| 行布局 | 横向分成若干等分的格子，按比例回流 |
| 列布局 | 纵向一个接一个堆叠，适合侧栏里的一列卡片 |
| 网格布局 | 行列格子，拖分隔条调比例，可用预设格网或自定义行列 |
| 流式行 | 横向排列、放不下自动换行，做卡片墙 |
| 固定面板 | 把一组内容钉在固定的位置和大小 |
| 停靠布局 | 上、下、左、右四个停靠区加中间主区，运行时可折叠、可拖动调宽 |
| 手风琴 | 多个可以折叠的分区，标题即分区名 |
| 侧边栏 | 主区加一个可折叠的侧栏 |
| 视图容器 | 多个视图一次显示一个，配合「视图导航」切换 |

组件库里能找到不少现成的例子：首页左侧分类「布局-容器」里有停靠布局、行布局、侧边栏、流式行、手风琴、选项卡加网格等十个完整的布局交互示例，「布局-适配」里有二十个适配方式的对照示例。

### 用格子搭骨架

以「指挥中心 · 三栏」模板为例，它是一个网格布局，顶栏加左、中、右三栏，左右两栏又各分上下两格。每个空格子中间有个「+」：

1. 先点一下骨架把它选中，再点空格子里的「+」，打开「选择组件」对话框。
2. 左侧选分类，或在上面的搜索框输入名字，点一个组件卡片，它就填进这个格子，大小自动撑满格子。

![「选择组件」对话框](./images/layout-slot-pick.webp)

1. **分类**：常用、全部和各个大分类。
2. **搜索框**：按名字找组件。
3. **组件卡片**：点一下填进格子。

格子填好后的效果：

![三栏骨架填进了饼图、折线图、柱状图](./images/layout-grid-filled.webp)

1. **填好的格子**：中间一栏放了柱状图，自动撑满。
2. **还空着的格子**：仍然显示「+」，点它继续填。

调整格子：

- **调比例**：选中骨架后，把鼠标移到两个格子之间的分隔条上，光标变成左右箭头，拖动就能调相邻两格的宽度（上下分隔条调高度）。
- **换格局**：选中骨架后，画布上方选区工具栏里的格网按钮弹出格网面板：

![网格布局的格网面板](./images/layout-grid-tool.webp)

1. **格网按钮**：选中网格布局时出现在选区工具栏里。
2. **预设模板**：「格网 1」到「格网 4」四种常见切法，点一下套用。
3. **自定义行列**：填行数、列数，点「应用」。

网格布局的样式里还能设列间隔、行间隔和内边距；「随画布增长」选「吃满剩余空间(子项重排)」时，画布变大格子跟着变大，选「保持设计比例」时整体按比例放大。

### 停靠布局：可折叠的侧栏

停靠布局适合「顶栏 + 左右侧栏 + 底栏 + 中间主画面」的经典大屏。在它的「基本设置」里打开要用的停靠区（启用左侧、右侧、底部、顶部），设各区的尺寸（如左侧 360px）、默认展开还是折叠，以及「悬浮覆盖」（侧栏盖在主区上面，不挤占主区）和「运行态可调」（播放时能拖分隔条）。

示例「布局交互 · 停靠布局安全隐患管理平台」左、右、下三个停靠区都能折叠。预览时点左侧栏边上的折叠按钮，左栏收起，中间的 CAD 图纸自动变宽：

![左侧停靠区折叠后，主区自动变宽](./images/layout-dock.webp)

1. **左侧展开按钮**：左栏已折叠，点它重新展开。
2. **右侧折叠按钮**：点它收起右栏。
3. **底部折叠按钮**：收起底部的趋势图。
4. **右侧停靠区**：图例与要素详情。
5. **底部停靠区**：隐患趋势统计。

## 让组件跟着窗口走

自由摆放的组件默认钉在设计坐标上。窗口比例变了，要让侧栏贴边、地图铺满，就要给组件设「响应式布局」，或者改用百分比单位：

![组件的位置单位和响应式布局](./images/layout-anchor.webp)

1. **位置/尺寸单位**：「像素」按设计稿坐标；「百分比」把位置和大小换算成占父容器的百分比，父容器变了组件等比跟着变。
2. **本设备显示**：当前这一档屏幕（大、中、小）是否显示这个组件。
3. **横向布局**：组件水平方向怎么跟窗口走。
4. **选项**：横向可选「左间距固定」「右间距固定」「左右拉伸」「居中」「等比缩放」；纵向布局对应「上间距固定」「下间距固定」「上下拉伸」「居中」「等比缩放」。

常见搭配：

| 组件 | 横向布局 | 纵向布局 |
|---|---|---|
| 铺满的底图（地图、三维） | 左右拉伸 | 上下拉伸 |
| 左侧栏 | 左间距固定 | 上下拉伸 |
| 右侧栏 | 右间距固定 | 上下拉伸 |
| 顶部标题栏 | 左右拉伸 | 上间距固定 |
| 底部说明 | 左右拉伸 | 下间距固定 |

示例「布局示例 · 地图为底+悬浮面板(响应式·锚点)」就是这样设的。把窗口从 1920 宽拉窄到 1280 宽，地图仍然铺满，两侧面板贴着各自的边：

![窗口 1280 宽时，左右面板仍贴边、地图仍铺满](./images/layout-anchor-narrow.webp)

1. **左栏**：左间距固定 + 上下拉伸，始终贴左、满高。
2. **右栏**：右间距固定 + 上下拉伸，窗口变窄时跟着右边缘往左移。

::: warning 注意
百分比单位和横向、纵向布局二选一：组件用了百分比单位，横向、纵向布局就不再起作用。盒子按百分比变了，盒子里按像素摆的内容不会自动缩放，这时给分组面板打开「内容自适应缩放」，或者整页改用固定大屏。
:::

## 下一步

- [多页面、画面与弹窗](./pages-windows.html)：多页切换、前景背景层、弹窗和抽屉。
- [组件库与样式](./components.html)：组件的通用样式设置。
- [保存、发布与嵌入](./publish.html)：发布后在不同屏幕上打开。