![]()
01 动态化使用 jue 语言(开发风格与 Vue 一致)开发，对于视图的布局采用了标准的Flex 布局方式。对于列表类视图，动态化提供了<scroll>、<slider>、<recycle-list>、<waterfall>等标签，将子视图的布局管理封装到标签中实现，业务只需要针对标签简单地设置相关属性，即可实现列表类布局，大幅提升研发效率。同时动态化也支持绝对布局以及控制视图的显示和隐藏等功能，使之能胜任绝大多数业务布局场景。
在京东金融App使用动态化方案适配鸿蒙系统的过程中发现，鸿蒙提供的Flex布局和W3C标准的Flex布局，在一些常用的默认属性上表现不一致。导致原本在Android、iOS和web端显示正确的UI布局在鸿蒙端显示错乱。经与鸿蒙的工程师沟通，华为出于多方面的考虑，并没有调整的计划。故而决定废弃鸿蒙提供的布局方式，使用标准的 Flex 布局，引入yoga布局库（由 FaceBook 提供一个开源的跨平台的布局引擎），yoga库的功能是解析视图的 CSS 设置，获取视图的位置（x,y）和尺寸（width,height），直接设置给视图，确保视图的正确显示。 下面详细介绍一下鸿蒙业务在实际开发中高频使用的布局方式，这些布局方式可以涵盖95%以上的业务布局场景。 02 Flex布局
动态化使用 jue 语言(开发风格与 Vue 一致)开发，对于视图的布局采用了标准的Flex 布局方式。对于列表类视图，动态化提供了<scroll>、<slider>、<recycle-list>、<waterfall>等标签，将子视图的布局管理封装到标签中实现，业务只需要针对标签简单地设置相关属性，即可实现列表类布局，大幅提升研发效率。同时动态化也支持绝对布局以及控制视图的显示和隐藏等功能，使之能胜任绝大多数业务布局场景。
Flex布局
1. 概念
容器（container）：是指开启了flex布局的视图
2. 容器（container）的常用属性
2.1 flex-direction
设置主轴方向,默认值是column(以下所说的默认都是指在动态化上的默认设置)。大部分设置看效果图已经很清晰，故不做过多解释。
flex-direction: row | row-reverse | column | column-reverse;不同主轴的显示效果：
2.2 flex-wrap
items在主轴上一行显示不下的情况下的折行方式，默认值是nowrap。
flex-wrap: nowrap | wrap | wrap-reverse;2.3 flex-flow
这是flex-direction和flex-wrap的简写方式，默认值是 column nowrap 。
flex-flow:column nowrap;2.4 justify-content
justify-content: flex-start | center | space-between | space-around | space-evenly | flex-end;2.5 align-items
定义item在交叉轴上的对齐方式，默认是stretch。
align-items: flex-start | center | flex-end | stretch;2.6 align-content
定义多根主轴在在交叉轴上的对齐方式（单条主轴情况下这个属性不生效）。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;<div style="height: 200px;flex-direction: row; justify-content: flex-start; align-items: flex-start;flex-wrap: wrap;align-content: stretch;"><text class="item" style="align-self: flex-end;">1</text><text class="item">2</text><text class="item">3</text><text class="item">4</text><text class="item">5</text><text class="item">6</text><text class="item" style="align-self: flex-end;">7</text></div>
3. 项目（item）常用属性
3.1 flex-grow
item在container中的主轴方向上的剩余空间中占据的分配比例系数（默认值为0，即不放大）。初次听起来不理解，看个例子就清楚了：
<div style="flex-direction: row;height: 60px;width: 300px; background-color: blue;"><div style="width:100px;flex-grow:1; height: 40px;background-color: red;"></div><div style="width:50px;flex-grow:2; height: 40px;background-color: green;"></div></div>
3.2 flex-shrink
item在container中的主轴方向上的缩小系数，默认值为0，即空间不够，也不缩小。这个属性仅在container无法承载item的情况下才生效。举个例子：
<div style="flex-direction: row;height: 60px;width: 300px;background-color: blue;"><div style="width:300px;flex-shrink:1; height:40px;background-color: red;"></div><div style="width:300px;flex-shrink:2; height:40px;background-color: green;"></div></div>
3.3 flex-basis
container在分配多余空间之前，item在主轴方向上占据的空间，默认值是auto，即本身默认的大小。举个例子：
<div style="flex-direction: row;height: 60px;width: 300px;background-color: blue;padding-top: 10px;"><div style="width:150px;flex-grow:1; height:40px;background-color: red;"></div><div style="width:150px;flex-grow:1; flex-basis: 50px; height:40px;background-color: green;"></div></div>
3.4 flex
这是一个复合属性，是flex-grow、flex-shrink 、flex-basis的简写形式。
flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]flex:1 等价于 flex: 1 1 auto; flex:none 等价于 flex : 0 0 auto;
3.5 align-self
item在交叉轴上的布局方式由container的align-items属性设置，如果某个item想使用别的对齐方式，可以给item设置align-self，就会覆盖container上的设置。默认值为auto，表示按照container的align-items样式，如果没有父元素，则用stretch。
align-self: auto | flex-start | flex-end | center | stretch列表类布局
以下是列表在京东金融中的几个具体使用场景。
position: absolute;
.item {position: absolute;right:10px;bottom:20px;width:50px;height:50px;}
绝对定位是相对于父视图的，使用left、right、top、bottom、width和height来设置。
1. v-if = true | false
<div v-if="false" class="item"></div>2. display : flex | none;
3. v-show=true | false;
4. visibility : visible | hidden;
5. opacity : 0 | 1
6. overflow: hidden | visible
动态化在京东金融 App 里已经大范围使用，截止到今年八月底已有200+ 页面，200+卡片使用动态化技术开发。在这个过程中与各业务一起解决了很多布局相关的问题。选择几个有共性的问题分享给大家。
1. 为什么没有给item设置宽，item也没有子视图，但item却有宽呢？
2. 为什么给item设置了宽，item显示的宽却是别的值？
3. item既可以从container的设置中获取尺寸，也可以被子item撑开获取尺寸，也可以自己设置尺寸，还可以被拉伸或者压缩。那item的尺寸最终是由谁来决定呢？
4. 如何让n个item按照比例占据container的主轴空间？
5. 对于一个复杂的视图，我该如何下手？
1.如果视图自身知道具体的宽高，那就直接设置，这是效率最高的方式。
2.如果视图自身不知道宽高，但是父视图有固定的尺寸，想办法从父视图获取。
3.如果视图自身不知道宽高，但子视图有宽高，则可以靠子视图撑开。
其他的情况一般都是以上四种情况的组合。只要理清视图间约束条件，排除约束矛盾点，确定优先级。先建立清晰的布局思路，明确视图的尺寸来源，按照既定思路布局，不写无效约束，一切就清晰自然。
