基于Yoga的移动端布局设计方案

September 25, 2019 · 2 min · holdsky

[TOC]

DSL基本语法

可阅读的文件，其语法首先遵循xml规范

 <节点名 节点类型  其他属性>
        <节点名 节点类型  其他属性>
        <节点名 节点类型  其他属性>
         ....
        <节点名/>
        <节点名/>

        <节点名 节点类型  其他属性>
        <节点名/>
<节点名/>

节点类型，指当前节点的类型：

视图类型，表示当前节点描述一个视图属性；此时节点名表示视图的类名，如Text，Button控件类名
其他待扩展

其他属性：

布局属性
数据属性
其他待扩展

示例:

<Button type="view" width="10",height="10%" title="点击">
  <ImageView type="view" img="xxx.png" />
  <JS type="javascript">
    此处为示例，不一定支持
  </JS>
</Button>

主轴和交叉轴 (main axis/cross axis)

布局方式

大致和css flex box一致

文件格式

应支持两种格式

.xml
.ffx（名称暂定)，.xml的二进制化，加速解析效率

布局引擎可根据扩展名判断文件格式

基本属性

取名尽量和css flex box保持一致

布局方向

direction

direction，子元素在父容器的布局方向。布局方向也会影响边的起点和终点。

默认情况下(ltr) “start”是指左侧，“end”是指右侧。

ltr（默认）从左到右排列。
rtl 从右到左排列。

yoga使用RTL方向时，应通过将方向传递给CalculateLayout调用或在根节点上设置方向来自定义此功能

flex-direction

flex-direction，属性指明flex子元素在flex父容器内的布局方向(相对于于主轴和交叉轴来说的)，也就是flex父容器的排列方向：

row ，（主轴方向）按行的方向排列。如果启用了换行，则下一行将从容器左侧第一项下方开始。
row-reverse ，（主轴方向）类似 row 值，但是反向。
column ，（交叉轴方向）按列的方向排列。如果启用了换行，则下一行将从容器顶部的左第一项开始。
column-reverse ，（交叉轴方向）类似 column 值，但是反向。

宽度和高度

计量单位待定

绝对宽度/高度，这可能是节点的最终尺寸，也可能不是，取决于Yoga节点上设置的其他属性( 译者注:如flex grow ，padding)

width

支持绝对数字、百分比数字、auto。例如 10，10%，auto。

height

支持绝对数字、百分比数字、auto。例如 10，10%，auto。

max-width

高优先级，默认值 undefined，即无此属性的约束。

支持绝对数字、百分比数字、auto。例如 10，10%，auto。

min-width

高优先级，默认值 undefined，即无此属性的约束。

支持绝对数字、百分比数字、auto。例如 10，10%，auto。

max-height

高优先级，默认值 undefined，即无此属性的约束。

支持绝对数字、百分比数字、auto。例如 10，10%，auto。

min-height

高优先级，默认值 undefined，即无此属性的约束。

支持绝对数字、百分比数字、auto。例如 10，10%，auto。

换行

flex-wrap

flex-wrap 属性控制着flex容器是单行还是多行，默认情况下，子元素沿着 主轴 排布

nowrap 默认值，不换行
wrap，多行
wrap-reverse，和wrap类似，但是换行方向相反

对齐

justify-content

沿主轴对齐内容，描述了如何沿主轴对齐子项。

flex-start，（默认值）将子元素与容器主轴的起点对齐。第一个子元素的起始边跟主轴的起始边对齐，之后的子元素的起始边跟前一个的末边对齐，依次类推
flex-end，末端对齐，和flex-start相反
center，将子元素与容器主轴的中心对齐。子元素相互靠拢，然后整体向主轴的中间对齐。行首和行末的剩余空间是相等的。如果子元素总长度超出容器宽度，那两边溢出的宽度的相同的
space-between，子元素在容器的主轴上顶两端分布。子元素平均分布在主轴上。如果子元素总长度溢出或只有一个子元素，那它的效果等同于 flex-start 的效果。否则，第一个子元素的起始边和主轴的起始边对齐，最后一个子元素的终边和主轴的末边对齐，剩余其它元素都等距离分布在剩余空间里。
space-around，和space-between 有些像，但不顶两端。子元素平均分布在主轴上，但行首和行末留有1/2的其它子元素之间的空间。如果子元素总长度溢出，或只有一个子元素，那么时的效果等同于 center 效果。否则，子元素平均分布在主轴上，它们之间的空间距离是相同的。而且行首和行末也空间，但空间的宽度只有子元素之间的宽度的一半
space-evenly，子元素沿主轴均匀分布。间距以及和容器开始边缘的间距、结束边缘的间距相同。

演示效果参见 https://yogalayout.com/docs/justify-content

align-content

沿交叉轴对齐内容 ，作用是在子元素是多行时，而且容器内还有剩余空间时，设定子元素的对齐方式，跟 justify-content 相似。注意： 这个属性对单行子元素无效果。属性值的含义是：

flex-start，（默认值）对齐到容器交叉轴的起点。子元素向交叉轴首对齐，子元素各行紧挨着前一行向交叉轴首对齐
flex-end，对齐到容器交叉轴的末端。子元素向交叉轴尾对齐，子元素各行紧挨着后一行向交叉轴尾对齐。
stretch，各行（指代主轴方向）等高度拉伸以填满容器交叉轴的高度。如果子元素高度溢出，在此属性效果等同于flex-start
center，对齐到容器交叉轴的中心。子元素各行（指代主轴方向）向交叉轴中心对齐。各行之间不留空间。而交叉轴首和交叉轴尾剩余的空间是相同高度。如果子元素高度溢出，在交叉轴首和交叉轴尾溢出的高度相同。
space-between，顶交叉轴的两端对齐。子元素各行（指代主轴方向）平均分布在交叉轴高度上。并且交叉轴首和交叉轴尾不留空间，各子元素之间的空间距离相等。
space-around，和space-between 有些像。子元素各行平均分布在交叉轴高度上，各行（指代主轴方向）之间的距离相等，并且交叉轴首和交叉轴尾也有空间，高度是各行（指代主轴方向）之间的距离的一半。如果子元素的高度溢出，则此属性的效果等同于 center。

align-items

描述子元素如何围绕交叉轴对齐，和 justify-content 的作用非常相似，align-items用于设定容器里子元素的 缺省列对齐方式。

stretch （默认），拉伸子元素以使其与容器交叉轴的高度匹配。如果子元素交叉轴方向上的高度值为auto，并且交叉轴方向上没有设定margin值，则子元素会拉伸。拉伸的高度是最大化的和列的高度相同。但同时还会受min-height/min-width/max-height/max-width的约束。

注意: 如果flex容器的高度小于这些约束高度，则子元素会溢出。溢出时，交叉轴首边和子元素起始边对齐，另外一端溢出。
flex-start，子元素与容器交叉轴的开始端对齐。
flex-end，子元素与容器交叉轴的结束端对齐。
center，交叉轴中心对齐。子元素向交叉轴中靠拢对齐。如果子元素在交叉轴方向上的高度溢出，则上下溢出的长度相同。
？？？baseline，使子元素沿着共同的基线对齐。

align-self

此属性和justify-content的作用很相似。此属性是作用在单个子元素上，设定指定子元素的交叉轴对齐方式，会覆盖父元素align-items的缺省设定。

如果子元素的交叉轴方向上的margin有值，则无效。

对于绝对定位的元素，值为 auto 时，系统自动计算效果。其它情况下，如果align-self值为auto，效果根据父元素的align-self而定，如果没有父元素，则设置为stretch

默认值auto，取值参考align-items

伸缩

flex-grow

描述了容器空间应如何 沿主轴 分配给子元素。放置其子元素后，容器将根据其子元素指定的flex-grow值分配所有剩余空间。 flex-grow接受大于等于0的任何浮点值，默认值为0。容器将在孩子之间分配剩余的空间，该剩余空间将根据孩子的弹性增长值来加权。

1、假设主轴为宽度方向
2、那么再假设容器宽度为10
3、假设有3个宽度为2的子项a,b,c
4、再假设a的flex grow为3，b的flex grow为1，c的flex grow为0

先沿着主轴布局a,b,c，三个子项占据宽度3x2=6
还剩下宽度4,根据各自的flex grow,计算加权比重得出
a占据剩余宽度的3/(3+1+0)=75%，也就是3
b占据剩余宽度的1/(3+1+0)=25%，也就是1
c占据剩余宽度的0/(3+1+0)=0%，也就是0

最后
a的宽度为 2+3 = 5
b的宽度为 2+1 = 3
c的宽度为 2+0 = 2

flex-shrink

描述了在子项 主轴上 的总大小溢出容器大小的情况下如何沿主轴收缩子项。 flex shrink 与flex grow非常相似，也计算加权比重和负空间（溢出大小）相乘，得出需要缩小的尺寸。 flex-shink接受任何大于等于0的浮点值，默认值为1。容器将根据其子项的flex shink值对子项进行收缩。（如何收缩可以参考上面flex-grow的示例）

flex-basis

flex-basis是一种与轴无关的方式。如果子元素的父级是具有flex row方向的容器，则设置子项的flex basis似于设置子项的宽度；如果子元素的父级是具有flex column方向的容器，则设置子项的flex basis似于设置子项的高度。 flex-basis的默认大小在执行flex grow动作和flex shrink动作之前计算。

边距和填充