画布适配与布局

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

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

新建时先选对模板

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

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

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

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

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

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

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

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

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

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

流式页面

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

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

大、中、小三档屏幕

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

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

三档的关系：

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

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

布局组件

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

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

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

用格子搭骨架

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

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

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

格子填好后的效果：

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

调整格子：

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

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

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

停靠布局：可折叠的侧栏

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

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

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

让组件跟着窗口走

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

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

常见搭配：

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

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

下一步

• 多页面、画面与弹窗：多页切换、前景背景层、弹窗和抽屉。
• 组件库与样式：组件的通用样式设置。
• 保存、发布与嵌入：发布后在不同屏幕上打开。