布局的概念

页面中的各个组件所放的位置、大小、间距，组件大小变化后对其它组件的影响、组件的叠加等称之为“布局”。

在搭建的小程序时，我们需要通过“布局”来构造一个合理美观的界面。

页面尺寸

在 Zion 编辑器上的【小程序】默认页面的大小为375*667（单位：像素），其中顶部导航栏高度为64，若页面配置了 Zion 的底部导航栏，那么底部导航栏高度为49。

页面导航栏与底部余量

顶部导航栏

如 图2-1 ⬇️ 所示，顶部导航栏在小程序开发中是基础常规配置，一般用来返回上一页面、显示页面名称、更多页面功能以及退出页面的功能。

Zion 的顶部导航栏

• 单击选中页面之后，默认顶部导航栏是开启的状态，可以通过右边栏来关闭默认顶部导航栏之后自己重新制作（但还是推荐使用默认的，功能比较全）

• 双击页面进入聚焦模式后单击顶部位置，来进行顶部导航栏背景颜色、文字颜色以及显示内容的配置

• 顶部导航栏的文字显示颜色只有 黑&白 两种颜色

底部导航栏

如图 2-2 ⬇️ 所示，底部导航栏在小程序开发中也是基础常规配置，通常通过点击对应的图标来切换显示小程序的主要界面。

Zion 的底部导航栏

在添加的第一个页面下方，有底部导航栏配置区域，点击该区域即可开始进行配置。当然您也可以选择通过其它组件自定义底部导航栏的样式。

此处为语雀视频卡片，点击链接查看：底部导航栏.mp4

Tips：

如果配置了底部导航栏，那么一个小程序至少要有两个底部导航栏按钮，否则无法正常发布

在小程序启动时，会先预加载所有配置了底部导航栏的页面，所以能够实现快速点击切换（自定义的底部导航栏除外）

Zion 的页面底部余量配置

如图 2-3 ⬇️ 所示，在没有设置页面底部余量之前，内容能够显示在整个页面上，但当设置了底部余量后，会出现一块空白的区域，让页面显示内容的区域变小了，超过底部余量的内容会被遮住，但可以通过向上滑动页面来查看。

如果想要在底部余量位置放置一些内容且让其显示，可以修改组件的定位方式，让处于底部余量位置的内容显示出来，具体看下方组件定位特性。

页面内组件定位特性

Zion 页面内的组件是通过平面直角坐标系原理来定位位置的。

如 图3 ⬇️ 所示，小程序页面以左上角为直角坐标系的原点，原点水平向右为X轴，原点垂直向下为Y轴。其中水平向右，X的值越来越大，跟传统坐标系不同的是，对于Y轴来说，垂直向下，Y的值越来越大。

我们以一组数值（X，Y）来表示组件在页面中所处的位置。

页面内组件定位方式

在 Zion 中有四种组件定位方式，分别为“关闭悬浮 从上向下“、“开启悬浮 从上向下”、“关闭悬浮 从下向上”以及“开启悬浮 从下向上”，可以通过右边栏的悬浮按钮或者布局方向来设置布局定位方式。

关闭悬浮 从上向下（默认）

如 图3 ⬇️ 所示，组件的坐标是（100，100），那么组件的左上角顶点就位于页面中（100，100）的位置，值得注意的是：当页面向上滑动时，组件也会跟着向上滑动。

Tips：

由于设备屏幕大小的不同，在不同设备上显示该页面的组件时，组件的 X 坐标会按照现有坐标值与实际页面宽高进行等比例的转换，转换规则如下图所示 ⬇️

关闭悬浮 从下向上

如 图4 ⬇️ 所示，当布局方向设置为 从下向上 时，组件会有如下几个特性：

• 该组件会遮挡住只配置了“从上向下”的其它组件

• 不受页面滑动的影响，相当于固定在了页面的某个位置，会与 页面底部 保持 固定 的距离，当页面宽度发生变化时，组件的 X 坐标换算规则与从上向下一致，当页面变长，组件的 Y 坐标值会变大，页面变短，组件的 Y 坐标值会变小

如 图4 ⬆️ 所示，在各个不同设备下的坐标换算规则：

• 在 Zion 默认页面中，页面高度为677，按钮组件左上角顶点距离页面底部的距离为 69，其坐标为（16，608）

• 当页面变为 iphone 5 时，其页面宽度为320，高度为568，所以按钮组件的坐标会换算为（320/375*16，568-69），即（13.6，499）

• 当页面变为 iphone 12 Pro 时，其页面宽度为375，与默认页面宽度一致，高度为812，所以按钮组件的坐标变为（16，812-69），即（16，743）

悬浮

在没开启悬浮之前，所有的组件可以理解为都位于一个平面上，但当某个组件开启了悬浮之后，情况如下所示

开启悬浮 从上向下

• 如图 ⬇️ 页面左侧小Z水印，不受页面滑动的影响，相当于固定在了距离页面顶部的某个位置

• 该组件会遮挡住只配置了“关闭悬浮 从上向下”、“关闭悬浮 从下向上”的其它组件

其余的坐标换算规则与“关闭悬浮 从上向下”规则一致。

开启悬浮 从下向上

• 如图 ⬇️ 购物车按钮所示，不受页面滑动的影响，相当于固定在了距离页面底部的某个位置

• 该组件会遮挡住只配置了“关闭悬浮 从上向下”、“关闭悬浮 从下向上”以及“开启悬浮 从上向下”的其它组件

其余的坐标换算规则与“关闭悬浮 从下向上”规则一致。

Tips：

综上所述，可以理解为组件之间的不同布局定位方式让组件之间有了层级关系

从上向下 < 从下向上 < 从上向下开悬浮 < 从下向上开悬浮

页面内组件大小特性

组件的大小是由宽高来决定的，设置合理的大小，对页面的美观程度也有着重要的影响。

对于组件的大小应用一般也会根据业务的实际需要来进行调整：

• 比如页面上的logo，是一张图片，需要用到图片组件，且它的大小不需要动态变化，那么设置这个图片组件固定大小即可

• 但如果是一段活动介绍，是一段文字，需要用到文字组件，但因为每个活动的介绍内容有长有短，那么就需要设置这个文字动态的大小

• 当然也会有组件要随着设备页面的大小来确定自身大小的情况

根据上述的三种情况，如 下图 ⬇️ 所示：Zion 为组件提供了三种布局模式：固定高度、适应内容、充满父组件

固定高度

顾名思义，就是设置了组件固定的宽高，组件就是设定好的宽高进行显示。

Tips：

但特殊情况是，如果页面的宽高发生了变化，那么这个组件的宽高也会根据页面的变化而发生变化，具体的变化规则跟组件定位时的坐标变化规则类似。

适应内容

首先组件设置了一个初始的宽高，当布局模式修改为适应内容之后，组件的高度会根据内容所需要的高度来进行动态调整：

• 内容实际所需要的高度 < 组件初始高度的，组件高度为初始高度

• 内容实际所需要的高度 > 组件初始高度的，组件高度为内容高度

充满父组件

父组件定义：

• 对于页面与页面中的组件来说，当拖入了一个新的文字组件进入到页面，页面就是文字组件的父组件

• 对于组件与组件内部的其它组件来说，当向容器组件中拖入了一个文字组件，那么容器组件就是文字组件的父组件

• 对于组件自带内部组件的，例如列表组件、条件式容器，其内部默认组件被称作子容器，而列表就是子容器的父组件

Tips：

Zion 中默认存在父子级关系的组件有，列表、横向列表、选择视图、标签栏、条件式容器。这些组件的父级和子级样式需要分开进行调整。

充满父组件的描述：

如 下图 ⬇️ 所示，在 Zion 中设置组件初始的宽高，除掉页面顶部导航栏以及底部导航栏之外的区域为展示内容的区域，当列表的布局模式修改为充满父组件时，组件的高度会根据页面的高度来进行动态调整并且充满整个展示区域

子容器大小调整

对于默认具有父子级关系的组件，子容器的大小、样式调整需要先进入组件的聚焦模式后，再进行调整。

• 列表/横向列表：只能调整子容器的高度，子容器的宽度跟随父级组件大小

• 选择视图：选择视图中有【选中视图】和【正常视图】两个子容器，两个容器的调整是同步的，也就是不论调整那个容器的大小，另一个容器会同时进行修改，可以通过拖拽或者在右边栏中直接来这只子容器的宽高。

• 条件式容器：条件式容器的子容器的大小无法单独修改，但可以通过修改其布局模式为【适应内容】，在条件式子容器中放置不同高度的其它组件，那么子容器实际显示出来的高度就会跟子容器内的组件高度一致。

纵向布局特性

页面纵向布局特性

特性：从上向下无限延展，内容滑动可见

虽然 Zion 编辑器上的【小程序】默认页面的大小为375*667，但是，仍然可以超出默认页面高度来对页面进行编辑，也就是在页面中，从上往下可以放置N个组件来进行页面搭建。

超出默认页面高度的组件在退出【聚焦模式】后不可见，但在项目运行时，可以通过向上滑动页面来查看内容。

组件纵向顺序排列定位特性

上一个组件为固定高度时

当上一个组件的布局模式为固定高度时，当前组件会保持当前设定好的坐标来进行布局定位，当前组件大小跟自己设置的布局模式相关。

上一个组件为适应内容时

• 当上一个组件的布局模式为适应内容，但内容大小没有超过组件默认高度时，当前组件会保持当前设定好的坐标来进行布局定位，当前组件高度跟自身的布局模式相关。

• 例如：上一组件默认高度为25，当前组件坐标为（100，100），内容大小没有超过25，实际生成的当前组件坐标会保持不变。

• 当上一个组件的布局模式为适应内容，内容超过了组件默认高度时，当前组件的坐标会根据内容高度来进行换算，当前组件高度跟自身的布局模式相关。

• 例如：上一组件默认高度为25，当前组件坐标为（100，100），内容实际高度为100，那么实际生成的当前组件左边会变为（100，175）。

上一个组件为充满父组件时

• 当上一组件的布局模式为充满父组件，下一个组件的布局模式也为“充满父组件”时，两个组件均只会以初始设定的高度来显示，充满父组件特性将失效。

• 当上一组件的布局模式为充满父组件，下一个组件的布局模式为“固定高度”或者“适应内容”时，上一个组件的充满父组件特性失效，以初始高度显示，下一个组件将会正常根据固定高度或者内容多少来显示。

子容器布局

除了组件本身能够设置布局模式之外，组件的默认子容器也能够设置布局模式，子容器中添加的其它组件布局特性与上述一致。

特殊情况：当子容器的【布局模式】为【充满父组件】时，父容器的【布局模式】不能是【适应内容】！！！

原因为：父组件依赖子组件大小，子组件也依赖父组件大小，双方相互依赖，谁也不知道到底以谁的高为准，就会发生冲突，因此不能够做以上的配置。

Tips：

正确的设置方式：

• 内部子容器【布局模式】为【充满父组件】，外层父容器【布局模式】应该为【充满父组件】或是【固定高度】。

• 内部子容器【布局模式】为【适应内容】或【固定高度】，外层父容器【布局模式】无特殊限制。

底部留白

当子容器内部组件的【布局模式】为【适应内容】，外层父容器的【布局模式】也为【适应内容】，会出现子容器的底部和外层容器底部完全贴合的情况。

若这时需要子容器底部相对父容器底部有一段间距，可以在子容器组件下方放置一个透明【视图】组件，这样父组件的高度等于子容器所有组件高度之和，所以在父组件显示内容时，底部就会出现一部分留白。

横向布局特性

特性：自适应设备宽度（按照比例缩放），除【视图】、【横向列表】之外，其余组件不可横向滑动，超出页面宽度的部分不可见，所以建议所有需要展示的内容都在默认的宽度内进行排布。

视图组件允许横向/纵向滚动

在 Zion 中【视图】组件可以设置“允许横向滚动”以及“允许纵向滚动”，但其能够滚动的区域有如下特性：

• 【视图】内需要滑动显示的组件位置需要超出【视图】本身宽高之外，如下图所示的紫色按钮所处的橙色区域、绿色按钮所处的绿色区域。

• 只有处于视图原本宽度右侧的内容才能够通过横向滑动来显示，如图所示，紫色按钮能够通过向右滑动显示出来，但橙色按钮就不能通过向左滑动显示出来

• 只有处于视图原本高度下方的内容才能够通过纵向划定来显示，如图所示，绿色按钮能够通过向上滑动显示出来，但灰色按钮就不能通过向下滑动显示出来

横向列表的横向滑动

详见【横向列表】组件介绍

重叠布局特性

• 当所有的组件都配置了“关闭悬浮 从上往下”，后拖入的组件会遮挡住已存在的组件，相当于后拖入的组件层级比已存在的组件层级高。

• 其它情况参考上述组件定位方式的组件层级描述来灵活理解。