1、什么是画布布局?
(1)目前桌面端的新开标签页 - 自定义页面排版均为自适应布局,即组件拉升时会自动挤压周围其他组件,若页面只有一个组件会默认全部占满当前屏幕,好处在于会自动适配大小屏,组件之间大小会自适应;
(2)新增了自定义模式的画布布局,可以满足更多不同的需要。画布布局的特色是:
- 画布大小不受屏幕限制,若组件超出当前屏幕大小,可上下左右滑动画布;
- 布局内只有一个组件时,还是默认显示当前组件大小,不会满屏占满当前布局;
- 拖拉其中一个组件大小时,当前组件不会挤压其他组件大小,组件与组件之间可以重叠展示。
2、布局操作说明
(1)画布布局入口
点击新开标签页,会看到两种布局选择:
- 自定义布局为新增的画布布局功能,点击空布局会进入画布布局编辑模式。
- 自适应布局为现有的页面布局,点击自适应 - 空布局会进入自适应布局编辑模式。

(2)画布布局编辑
进入画布布局,可以直接从组件工具箱中拖拽组件到画布布局内;也可以唤起独立组件窗口直接拖拽到画布布局面板内;
可以点击组件右上角的 “X” 来关闭组件;或者组件右上角的 “…”- 移除组件来关闭组件;

(3)组件联动规则
画布布局内的组件联动规则和现有的全局联动规则保持一致:
- 面板内的组件默认为联动,可设置不联动、或者自定义设置联动分组;
- 处于相同联动分组的组件,切换其中一个组件的标的,其他组件会自动跟随联动,如将图表组件的标的切换为 00001,若行情报价组件和图表组件处于同一联动分组,标的会自动同步切换为 00001;

(4)画布布局锁定功能
- 若画布布局编辑完后,可以点击右上角的工具栏进行页面布局锁定,页面锁定后,不可再添加、移动组件;方便用户存在误操作移动布局的情况;
- 页面布局锁定后,也可以点击页面解锁,来解除布局锁定;

(5)画布布局磁吸功能
磁吸功能是一种设计工具,旨在帮助用户更轻松地对齐和排列画布上的元素。当用户在画布上移动元素时,磁吸功能会自动将元素吸附到最近的网格线或其他元素上,从而实现精确的对齐。这不仅提高了设计的效率,还确保了布局的整齐和美观。
画布布局,默认磁吸功能为开启状态,若不需要的话,可以点击进行关闭。

3、画布布局和自适应布局对比
布局 | 自适应布局 | 画布布局 |
布局特点 | - 动态调整:自适应布局能够根据设备的屏幕大小和分辨率自动调整布局。布局内只有一个组件时,会满屏占满当前布局,拖拉其中一个组件大小时,会自动挤压适配其他组件大小
- 流式设计:元素通常以百分比或相对单位(如 em、rem)进行定义,而不是固定的像素值。
- 灵活性:非常适合需要在多种设备上访问的网页和应用,能够提供一致的用户体验。
| - 固定尺寸:画布布局通常使用固定的像素值来定义元素的位置和大小。
- 绝对定位:元素的位置通常是绝对的,基于画布的固定尺寸进行定位。
- 自由度高:设计师可以完全控制每个元素的位置和大小,适合复杂的、精确的布局需求。
- 不随设备变化:布局不会根据设备的屏幕大小自动调整,通常需要为不同设备单独设计不同的布局。
|
支持范围 | 现有的系统面板 -- 自适应布局 新开标签页 - 自适应布局 | 新开标签页 - 自定义布局; |
是否大小屏适配 | 是,会根据屏幕大小自动适配组件大小 | 否,若组件大小超过当前屏幕了,可以滑动查看完整组件大小 |
面板内 - 组件之间是否可重叠展示 | 否,不可重叠展示,会挤压其他组件 | 可以重叠展示,组件大小不受挤压 |
优点 | - 提高用户体验:在不同设备上都能提供良好的显示效果。
- 维护方便:一个布局可以适应多种设备,减少了维护成本。
| - 组件大小及数量不受屏幕限制,可随意摆放,不影响组件功能使用
- 精确控制:设计师可以完全控制元素的布局,适合需要精确定位和复杂设计的场景。
- 简单直接:不需要考虑多种设备和屏幕尺寸,设计和开发相对简单。
|
缺点 | 受屏幕大小限制,多个大组件放一起时,会被挤压的比较小,影响组件功能使用 | - 缺乏灵活性:在不同设备上可能需要单独设计不同的布局。
- 用户体验:在不同设备上可能无法提供一致的用户体验,尤其是在小屏幕设备上。
|
布局 | 自适应布局 | 画布布局 |
总结
画布布局和自适应布局各有利弊,用户可以根据自己需要自行选择对应的布局。