编辑
用户可以进入页面编辑模式，手动修改页面元素样式、布局、交互等信息
外观
选中元素，可以在属性面板中调整元素的圆角、描边、阴影、字体、背景、图片
自动布局
生成的所有页面默认布局方式都是自动布局。可以通过属性面板配置在自动布局和绝对定位布局之间切换
简介
自动布局的元素之间的相对位置关系由系统自动计算。当内容增减或容器尺寸变化时，元素会自动调整位置和间距，保持整体结构完整。
举例子来说明一下
- 自动布局的元素在结构上存在层级关系：四个灰色的矩形在视觉上包含在蓝色矩形内部，并且在层级结构上也是包含的关系
- 四个灰色矩形不能任意拖动，只能按照既定规则自动排列
优点
- 可以通过调整文本内容来控制容器大小
- 调换元素位置时，会自动调整布局
- 添加、删除元素时，会自动调整布局
缺点
元素的排列必须遵循页面的排列规则，无法在画布中自由拖拽元素，将元素放置到任意位置
切换布局
点击属性面板上的"+"图标能切换元素的布局状态
宽高配置
自动布局状态下，宽高的有三种表现形式：固定、填充、按内容撑开
- 固定
当把自动布局容器设定为固定高度或固定宽度，调整容器宽高不会改变子元素的布局
设定为固定宽高后，元素的自适应效果会消失
- 填充
当把自动布局容器设定为水平填充或垂直填充时，在保留边距前提下，子元素会在对应方向上充满自动布局容器
- 按内容撑开
当把自动布局容器设定为水平按内容撑开或垂直按内容撑开时，会在保留边距前提下，用最小的宽或高包裹子元素
子元素布局
除了可以切换元素自身的布局方式外，还可以一键批量切换元素内部子元素的布局方式
开关
- 点击加号，内部第一级子元素 的变为自动布局
- 点击减号，内部第一级子元素变为绝对定位布局
布局方式
子元素的在容器内的排列方式
- 水平布局：所有子元素在水平方向上一字排开
- 垂直布局：所有子元素垂直堆叠，依次向下排列
- 水平换行布局：子元素在水平方向排列，超出宽度后自动换行到下一行
- 网格布局：子元素按照设置的网格布局排列
间距
子元素之间的距离
- 固定：子元素之间的距离是固定的数值。不管容器大小怎么变，子元素的间距都是固定值。
- 自动：在保留边距的前提下，子元素均匀分布在容器中
边距
容器边界和子元素之间的距离
对齐
子元素在容器中的对齐方式。
- 间距为自动时，每个方向只有三种对齐方式：
- 水平方向：顶部、居中、底部。
- 垂直方向：左、中、右。
- 间距为固定时，每个方向有九种对齐方式
- 水平方向：顶部（左中右）、居中（左中右）、底部（左中右）。
- 垂直方向：左（顶部、居中、底部）、中（顶部、居中、底部）、右（顶部、居中、底部）。
绝对定位布局
简介
与自动布局相对的是绝对定位布局，传统设计软件如axure等都采用这种布局方式
元素排列没有既定规则，可以放置到任意位置，如下图 所示
优点 元素可以随意自由排列，可以自由拖拽元素，放置到任意位置
缺点 没有自适应效果，不能像自动布局那样在不同窗口尺寸大小下显示成不同样子
切换布局
点击属性面板上的"+"图标能切换元素的布局状态
位置
通过调整坐标调整元素在画布中的位置
宽高
宽高的有三种表现形式：固定、填充、按内容撑开
- 固定
元素宽高保持固定值不变
- 填充
设定为水平填充或垂直填充时，当前元素会填满父容器
- 按内容撑开
设定为水平按内容撑开或垂直按内容撑开时，当前元素会用最小的宽或高包裹子元素
克隆
在当前元素下方/后方生成一个相同的元素
复制/粘贴
复制选中元素，允许粘贴到当前或其他页面
替换
将复制的元素对选中元素进行替换
上移/下移
上下/前后调换元素位置
删除
删除选中元素