天天看点

鸿蒙跨端实践-布局方案介绍

作者:京东科技 刘宁

一、前言

动态化使用 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%以上的业务布局场景。

二、Flex布局

在动态化上,视图默认使用的就是flex布局方式(相当于默认设置了 display:flex;)。

1. 概念

容器(container):是指开启了flex布局的视图

项目(item):是指容器的子视图

容器(container)有几个重要的概念

主轴:item在container上的排列方向,主轴开始的位置叫 main start, 主轴结束的位置叫 main end;item在主轴上占据的尺寸叫 main size

交叉轴:与主轴垂直的方向;交叉轴开始的位置叫 cross start ,交叉轴结束的位置叫 cross end;item 在交叉轴上占据的尺寸叫 cross size

2. 容器(container)的常用属性

2.1 flex-direction

设置主轴方向,默认值是column(以下所说的默认都是指在动态化上的默认设置)。大部分设置看效果图已经很清晰,故不做过多解释。

flex-direction: row | row-reverse | column | column-reverse;           

不同主轴的显示效果:

鸿蒙跨端实践-布局方案介绍



以下是假设主轴是row的情况下,介绍其他属性

2.2 flex-wrap

items在主轴上一行显示不下的情况下的折行方式,默认值是nowrap。

flex-wrap: nowrap | wrap | wrap-reverse;           

不同 flex-wrap 的显示效果:

鸿蒙跨端实践-布局方案介绍



2.3 flex-flow

这是flex-direction和flex-wrap的简写方式,默认值是 column nowrap 。

flex-flow:column nowrap;           

2.4 justify-content

定义item在主轴上的对齐方式,默认值是 flex-start 。

justify-content: flex-start | center | space-between | space-around | space-evenly | flex-end;           

不同 justify-content 的显示效果:

鸿蒙跨端实践-布局方案介绍



2.5 align-items

定义item在交叉轴上的对齐方式,默认是stretch。

align-items: flex-start |  center | flex-end  | stretch;           

不同 align-items 的显示效果:

鸿蒙跨端实践-布局方案介绍



2.6 align-content

定义多根主轴在在交叉轴上的对齐方式(单条主轴情况下这个属性不生效)。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;           

这个刚接触的同学不好理解,什么是主轴的对齐方法?拿 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>           

UI显示效果如下:

鸿蒙跨端实践-布局方案介绍



蓝色为 container,主轴为 row(flex-direction: row;),支持折行(flex-wrap: wrap;),多行主轴的对齐方式为 stretch(align-content: stretch;),此例中有两条主轴,因此两条主轴的高将充满 container 的高;

第一条主轴中包含视图 1,2,3,4,5。第二条主轴包含视图 6,7。单条主轴的在竖直方向上的对齐方式为从上到下(align-items: flex-start;),而 1 改变了所在主轴的交叉轴方向的对齐方式为从下到上(align-self: flex-end),因此1底部对齐,2,3,4,5顶部对齐。 6,7 同理。

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>           

UI效果如下:

鸿蒙跨端实践-布局方案介绍



由于 item1 宽度为100px,item2 宽度为 50px, container在主轴剩余空间为300-100-50 = 150px;根据flex-grow 的设置,item1占1/3,为50px;item2占2/3,为100px;故最终 item1 与 item2 平分了主轴空间。

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>           

由于item1与item2的宽度一致,item1压缩的比例为item1的2倍,因此最终item1的尺寸是item的2倍。UI效果如下:

鸿蒙跨端实践-布局方案介绍



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>           

由于item1宽度为150px;flex-basis默认为auto,因此默认为150px; item2宽度为150px,但flex-basis为50px,因此在计算所占空间时按50px算,这样在container的主轴上的剩余空间为 300 - 150 - 50 = 100px;item1和item2的flex-grow都为1,因此,各站剩余空间的1/2。因此item1的宽为150+50=200px;item2为50+50=100px;UI效果如下:

鸿蒙跨端实践-布局方案介绍



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;

注意:在使用的时候经常习惯性的使用 flex:1;很多时候大家想要的仅仅是 flex-grow:1;如非必要,尽量不要写无用约束。

3.4 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;           

三、列表类布局

对于列表布局,动态化提供了<scroll>、<slider>、<recycle-list>、<waterfall>、<lego-container>、<feed-container>等标签,对于多页面管理提供<page-container>、<tab-bar>等标签。业务仅通过修改标签属性,即可实现子视图在列表内以不同的布局方式显示。

以下是列表在京东金融中的几个具体使用场景。

鸿蒙跨端实践-布局方案介绍



四、绝对布局

对于要脱离视图文档流,不受兄弟视图布局影响,固定显示于某个指定位置的子视图,可用绝对布局,比如悬浮图标等。

1.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;

这种隐藏方式,不会销毁元素,仍存在于HTML文档中,仍可通过JavaScript访问和操作,但元素会从布局上移除,元素不占据任何空间,不能参与用户交互事件。

3. v-show=true | false ;

在动态化上会被解析为display:flex | none;

4. visibility : visible | hidden;

这种隐藏方式,只是从视觉上移除,仍然参与页面布局,保留元素的位置,无法参与用户交互。

5. opacity : 0 | 1

这种方式是设置视图的透明度,在透明度为0时,完全隐藏,视图仍参与页面布局,保留元素位置,在 Web、Android 和Harmony端仍可参与用户交互,但在 iOS 端只有当透明度大于0.1时可以。这个一般用作视图显示或者消失的过度动画。

6. overflow: hidden | visible

规定视图超出父视图边界时如何处理。在Harmony/iOS/Web 端默认值为visible,即超出可见,Android端默认值为hidden,超出不可见。如果设置了 visible ,如果视图本身添加了事件,对于超出父视图的部分,Harmony/Android/Web仍可响应事件,在 iOS 端无法响应事件。

多说一句:动态化作为一个跨端框架,会最大限度的抹平各端差异,但在有些系统特性上,还是会保持各端的默认实现。业务在使用时,可根据具体情况,具体处理。

六、布局问题分析

动态化在京东金融 App 里已经大范围使用,截止到 2024 年 8 月 26 日已有200+ 页面,200+卡片使用动态化技术开发。在这个过程中与各业务一起解决了很多布局相关的问题。选择几个有共性的问题分享给大家。

1. 为什么没有给item设置宽,item也没有子视图,但item却有宽呢?

因为在动态化上视图的主轴默认是column,align-items默认是stretch,因此item会填充父容器。

2. 为什么给item设置了宽,item显示的宽却是别的值?

这个情况就要具体分析了,如果你在设置了宽的情况下,还设置了flex:1;或者flex-grow:1;再或者flex-shrink等,item可能会被拉伸或者压缩,导致宽度变化。也有可能其他item的缩放级别更高,优先满足其他item的显示,当前item的尺寸也有可能被压缩。

3. item既可以从container的设置中获取尺寸,也可以被子item撑开获取尺寸,也可以自己设置尺寸,还可以被拉伸或者压缩。那item的尺寸最终是由谁来决定呢?

首先假设主轴为 column。container的align-items默认是stretch,因此item会填充父容器。但是如果item自身设置了宽,则会覆盖stretch。如果item的align-self不是stretch,本身也没有设置宽,但子视图有宽,可以被子视图撑开。如果自身设置了宽,则不受子视图影响。

在主轴方向上:如果item 本身没有设置高,但子视图有高,则可以子视图撑开。如果自身设置了高,就不受子视图的影响。如果自身设置了 flex-grow:1则会填充父视图,同样如果设置了 flex-shrink:1,空间不足则被压缩,都会覆盖自身设置的高。

最后:max-width 和 max-height 优先级最高,如果触发边界条件,就会生效,从而覆盖其他设置。

4. 如何让n个item按照比例占据container的主轴空间?

对于这类比例问题,可设置所有item 的flex-basis 为 0,把自身空间全部收回,通过 flex-grow 分配对应比例即可。

5. 对于一个复杂的视图,我该如何下手?

其实越是复杂的视图实现的方式就越多,没有固定的、标准的实现方式。下面说一下我的一点看法,我将视图分为以下几种场景:

1.如果视图自身知道具体的宽高,那就直接设置,这是效率最高的方式。

2.如果视图自身不知道宽高,但是父视图有固定的尺寸,想办法从父视图获取。

3.如果视图自身不知道宽高,但子视图有宽高,则可以靠子视图撑开。

4.如果必要,使用 max-width 和 max-height 做最高层级的条件约束。

其他的情况一般都是以上四种情况的组合。只要理清视图间约束条件,排除约束矛盾点,确定优先级。先建立清晰的布局思路,明确视图的尺寸来源,按照既定思路布局,不写无效约束,一切就清晰自然。

七、写在最后

动态化是一个涉及JavaScript、iOS、Android、Harmony、Java、Vue、Node、Webpack等众多领域的综合解决方案,我们有各个领域优秀的小伙伴共同前行,大家如果想深入了解某个领域的具体实现,可以随时留言交流~!