布局设计原理

多端开发（Web端）

在 Zion 编辑器上创建了网页的项目之后，能够同时开发电脑桌面端、手机移动端以及平板电脑端的网页，所以在设计界面布局时，需要根据两端的页面情况来分别设计。

小程序端的布局同网页的手机端。

分别配置电脑桌面端以及手机移动端的布局(Web)

由于不同端口的页面尺寸不一样，所以同一个页面在两个端口的显示布局肯定也是不一样的。

为了满足不同端口的布局样式需求，在 Zion 的编辑器中，当往桌面端拖入了一个组件之后，该组件会同时出现在其他端的页面上，对于该组件的布局编辑，可以在两个端口对同一个组件有着不同的大小、位置的设置。

当在桌面端拖入了一个组件，然后在移动端修改了某个组件的位置或者大小之后，将会产生移动端与桌面端的 「布局断点」 ，此时，你可以根据移动端的页面尺寸来调整页面布局。

对于同一个组件来说，在不同的端口，你可以修改的布局内容有：组件定位方式、组件位置、组件大小、内边距、外边距以及圆角，其他的属性以及行为的修改将会在两端同时生效。

位置

类型： 配置该列表组件在其父组件中的定位方式

• 相对：相对于父组件的规定的方式进行定位
• 绝对：根据设定好的距离父组件上下左右的距离来进行定位
• 固定：根据设定好的距离父组件上下左右的距离来进行定位，滚动页面时该组件会悬浮在固定位置

绝对与固定类型有四种定位方向：左上、右上、左下，右下，下图所示为 左上 的定位方式。点击不同方向的坐标线（T、L、R、B旁边的线），可切换定位坐标方向。

层级： 默认自动，即先拖进来的组件层级低，后拖进来的组件层级高，当两个组件重合时，层级高的在绝对或固定定位模式下，会遮住层级低的组件，当定义了层级的数值之后，层级数值大的会遮住层级数值小的组件

尺寸

你可以设置组件的宽度和高度，有以下三种长度单位：

• px： 设置的宽高不变，为固定的像素值
• %： 占父组件的百分比，或者几分之几，随父组件大小的变化而变化
• 适应： 根据组件内部内容的多少来调整宽/高

最大/小，宽度/高度： 当设置组件的宽度或者高度为“百分比”或者“适应”时，可以设置组件最大/小的宽度/高度，目的是子组件随着页面/父组件的变化时，在极限状态下（页面过大或者过小），页面中的组件能够保持一个最大/最小值，从而保证页面的的正常布局与美观度

尺寸设置实例

百分比， 指相对于父组件的宽/高百分比长度，取值范围为0%到100%。如下图，按钮的高度设定为50%，如果父组件的高度为500px，那么它的高度就是250px。

内/外边距

内边距：设置【子组件】与【父组件】之间的间距 外边距：设置 组件本身 与 同级组件 之间的间距

布局

父组件与子组件

父组件和子组件的概念很好理解，如果A组件包含B组件，那么A是父组件，B是子组件。如下图，一个视图里放了三个按钮。那么视图是父组件，三个按钮都是它的子组件。三个按钮之间，是兄弟组件的关系。

在弹性布局中，我们可以通过设置父组件的右边栏属性，来改变子组件的布局位置。

Tips： 相对定位中，组件不能随意调整位置，要考虑它的父亲和兄弟的位置。牺牲了自由度，换来的是排版更方便，在适应不同尺寸的页面下有着良好表现。

布局模式

在组件的定位方式为“相对”定位时，可以利用如下布局模式快速对页面内容进行布局操作

溢出

当【父组件】中放置的【子组件】超出了【父组件】的宽度时，可根据业务需求调整【父组件】的“溢出”模式

间隔

当【父组件】的分布方式为“起始”时，可为【子组件】设置自定义的间隔距离

光标样式

如 下图 ⬇️ 所示，在不同的交互场景下，我们可以通过光标样式提示用户某个组件拥有特定的交互行为，你可以在组件的右边属性栏中设置光标样式

• 继承：基于所使用的操作系统，如Mac、Windows默认的光标样式
• 标准、自动：基础箭头型光标样式
• 无光标：不显示光标
• 手型：手掌型光标样式，一般用作提示用户这里可以点击、拖拽移动
• 帮助：问号型光标样式，一般用作提示用户这里可以点击获取提示
• 禁止：禁止型光标样式，一般用作提示用户这里不可以点击
• 文本输入：输入型光标样式，一般用作提示用户这里可以输入内容

​