鸿蒙开发：弹性布局Flex原创

Hello, 嗯，咱们这个视频呢，主要给大家去，呃介绍一下在鸿蒙开发当中弹性布局flex，哎如何去使用，嗯，其实关于这个弹性布局fle克X呢，相对来说可能没有其他的容器组件啊出现的频率高，哎，比如说像其他组件，像冷对吧肉还有什么？呃，热带推肯定的这些组件可能在我们实际开发中啊，用到的地方是非常是之多的，嗯，相对来说，嗯，Flex这个组件呢，这个容器组件，哎，它的使用频率就没有那么高，但是。在鸿蒙的开发当中呢，它依然有着一个举足轻重的一个作用，就是使用它可以很方便的来实现我们的一些特定的效果，比如说我们的一个词组建的一个流式布局样式。以及我们的一个。子组间排练的一个方向对吧？呃，或者说其他的一些呃，效果OK，那么关于这个我们弹性布局呢啊，我们先去简单的去介绍一下它的一些呃基本的概念，然后我们去。

看一下。啊，这里有个问啊。来我们先去看一下，首先呢，关于那个flex呢，我们最主要的是通过呃，三个方三个方面吧，给大家去阐述一下，第一个就是先去介绍一下，对吧，什么是。Flex, 第二个就是关于那个f flag克的一些使用方式，比如说我们可以控制它的方向，对吧，肉啊肉啊vers，还有那个column，以及column vers的，以及那个控制我们的行列对齐方式等等，那么最后呢，我们会关于把这个f flagx呢，哎去实去实现一个我们哎常见的一个哎流失布局的一个，呃，效果。OK, 我们所有的视频呢啊，都是基于呃API13的，嗯，大家可以看大大家可以看到啊，其实我们最后一个案例就是要实现我们的一个流失流失布局的样式，其实这个呢，就是我在之前嘛，不是开发了一个搜索组件嘛，其中有一个功能就是呃，针对历史搜索组件进行怎么着流失布局的一个。

是。因为搜索的内容怎么样，长度不一对吧。嗯，长度不一，用一用一般的组件呢，还无法达到我们的一个需求，所以说只能使用什么，哎，弹性布局，然后去实现，当然这个的话，我们最后去给大家去写这个案例了。好，下面去介绍一下对吧？什么是flex，其实一句话解读对吧，主要是对容器中的子元素进行列对齐。和分配剩余空间，它允许我们开发者怎么着通过简单的属性设置来实现一些呃，复杂的一个呃布局效果，其核心思想呢，就是让容器能够根据子元素对吧，根据子元素的大小。

和排列方式进行自动调整布局，就是刚才我们所说的什么流失布局的一个效果，对吧？从而得到一个什么，呃，灵活的一个呃界面设计主要特点呢？呃有三个，第一个就是灵活性对吧？它可以第一个它可以根据什么容器的大小自动去调整子元素的排列方式和大小。第二个就是方向性对吧，Flex对吧，布局支持我们的水平和垂直两种的一个。列方式，开发者呢，可以根据我们的一个呃需要呢，选择我们适合的一个呃列方式，那么关于对齐方式呢，莱斯布局呢，也提供了一个多种的一个呃对齐方式，比如说我们的居中啊对吧，两端对齐啊对吧等间距对齐啊等等，方便我们开发者为现我们各种的一个复杂效果。

它有两个概念，这个呢，我们作为一个，嗯，简单的了解，第一个就是呃，主轴和第一个就是主轴，第二个就是交叉轴，那么什么是主轴呢？啊，所谓的主轴就是水平方向。对吧，交叉轴呢，就是我们的垂直方向，那主轴开始的位置。就是说主轴开始的位置，我们被称为什么主轴起始点，那么结束位置呢？就是一个主轴的结束点，那么交叉轴开始的位置呢。就是一个什么交叉轴的起始点，结束位置呢，我们就可以称为什么交叉轴的结束点，嗯，使用方式呢，呃很是简单对吧？呃，因为来克它是一个容器组件嘛，我们直接可以在容器组件去设置我们的想要的呃组件，那么控制方向记住了，它控制方向有4个方向通过，哎，呃，我们的一个呃方向。嗯，Direction对吧，属性来控制我们子元素的方向，目前主要有4个选项，第一个是肉，就是主轴与行方向一致作为布局模式。第二个就是。

Rule riververse对吧，它是与相反方向，第三个就是一个column，就是垂直，第4个就是column riververse, 它是一个与相反方向，呃，进行进行一个布局，哎，我们简单的把这几个方向啊，先用代码案例让大家去加深一下印象，OK.好，我们把这个relative contain改成我们的一个flex。OK, 方向对吧，设置一下方向，我们先设置横向吧，瑞。等于flex。Direction这种好，我们给它设置几个组件。这是我们的。组建1好，我们给它复制进去。

总加2总结3。组建一组减2。和我们的一个呃总结赛，那么我们嗯，为了为了大家更加直观的看到啊，我们尽量给他设置我们的一个背景颜色吧。第一个我们给他治了。Background color.红字。Color red.嗯，第二个我们给他设置为橙色。Orange, 第三个呢，我们给它设置一个粉色吧。OK, 嗯，我们再让它产生一点内边距吧，让文字更加的能直观看出来，内边距给它为10吧。来，我们去运营一下。好，引运运起来我们看一下效果，哎，可以发现怎么着，如果说你的方向采用的是柱，也就是横横对吧，它会直接是横向排列对吧？从左到右组件1组件二和我们的一个组件三，也就是我们如果说采用这个主轴与方向一致作为布局模式，如果说我们采用那个反方向的肉rivers，来我们一起看一下小。

Rivers.运行一下。可以发现怎么着，它会从右到左，也就是反方向的，嗯，咱们再把那个垂直的也去看一下。看了。来我们看一下效果，嗯，它是从上到下对吧，组件1组件二组件三，我们给他搞一个rivers反方向看一下。

哎，它就会从下往上进行排列，好，这就是它的一个方向啊，就是在咱们实际开发中，如果说我们有遇到对吧，你想从啊对吧，反方向对吧，或者说我们的组件从上到下，从左到右进行排列，哎，我们就可以去实现呃，我们的一个呃组结的排列，其实大家有没有可以发现啊，当我们采用肉或者是column的时候，是不是跟我们的这个呃肉啊容器或者说是column容器，其实效果是一样的。对吧，啊，其实啊，这里呢，是很很类似的，OK, 呃，除了这种的方向之外呢。来，我们可以往下走，对吧，这是我们的肉对吧，这个已经。看到这是我们的一个方向。这是我们的一个。克勒姆垂直，好，下面我们去证述一下控制它的行隔列啊，控制防和列的意思就是说你是你是啊，是否要通过什么多行或者是多列进行展示，那么通过哪个属性呢？就是通过我们的一个web属性，就是来控制你是啊，单行单列还是多行多列，那么它有三个参数是可以选择的，它的默认就是什么，哎，No呀，就是什么。

按照实际的对吧。尺寸。然后怎么样去展示，也就是弗莱克容器元素，哎，单行单列布局，子元素尽可能的约束在哎容器之内，当一当这个子元素由最小尺寸啊约束呃设置时，那么弗flag克容器呢，不会对其强制作为一个弹性的压缩，第二个就是一个外网，就是它支持啊我们的一个flag克容器。多行或者多列来进行排布，子子子元素呢，允许，哎，超出我们的容器还有一个什么，一个外部reverse。

它是怎么反方向，OK, 我们把这几个啊控制行列，我们去单独的去用代码给大家去演示一下。嗯，显然目前三个组件无法实现我们的一个换行啊，我们给他先把我们的一个外部属性给它加上。Flex.WHY?嗯，再给他多加几个中间稿，否则没法换号，没办法出现多列的情况4。哦。6嗯。Pink拼NK给一个gras规则给他一个。呃，其他都是灰色吧。来，我们去运营一下。

诶，可以发现怎么着还是没有实现，本来我们这个外部是支持多列的，目前来说啊，没有实现多列这种情况很正常，因为你这6个组件怎么着整体的宽度还不满足换行的一个条件，嗯，我们再给他添加。See.爸。来，我们再提醒一下。可以发现怎么着，哎，我们的7和8已经自动的怎么着换到了下一行，对吧，这就是我们的一个啊。无外，哎属性可以实现，哎，你的子元素达到一定的最大阀门的。宽度的高度时就会自动化和我们来看一看另一个原理，另一个就是我们的一个外坡，哎。是哎。你。

哎，他就会怎么着，原来你是从左到右，那么现在呢，它就变为了什么，你的从右到左，OK, 这就是呃，它的外部属性啊，可以实现我们的一个多列的一个呃，一个情况。目前来说下一个呢，就是就是对齐方式啊啊对齐方式呢，其实它有两种，其实刚才我们已经给大家说过了，它有它有一个概念，就是什么概念呢？就是我们的一个主轴概念，还有一个什么，我们的一个交叉轴的概念，嗯，这个嗯，前面已经跟大家说过了，主轴方向主要使用什么，哎，Just斯汀肯。是肯定的这个属性，那么交叉轴呢，是用an it, 嗯，目前来说那个嗯。Just contain呢，它有很多属性啊，比如start啊，对吧，像手段对齐啊，对吧，还有我们的一个center啊，对吧，像中心对齐啊，以及我们的摁的啊，对吧，像尾部对齐，还有一个express。

比腾对吧？呃，均匀分配等等，那么下面呢，这些属性呢，咱们作为一个了解，嗯即可，嗯，在实际的开发中，你使用的多了，并也能够记住了，还有一个什么交叉轴对吧拉it对吧，你是凹凸啊还是start n还是N啊等等，嗯，那么子元素的啊。做一个了呃了了解即可，那么子元素属性呢，下面就这个子元素的一个属性，其实呃子元素呢，呃除了通，除了通过flag克容器来控制之外，其实子元素里也可以自由控制占位情况，比如说通过什么哎flag克斯对吧？来分配剩余的空间比例对吧？这个我们之前。之前之前在之前的文章中，不是之前在之前的视频当中，我们可能关于剩余空间有个概述，比如说我们可以使用啊百分比啊，可以使用那个权重啊，可以使用那个嗯，Blank对吧，其实这里呢，我们也可以使用flas来实现，通过这个对吧，来压缩比例对吧。

通过allow safe来覆盖容器。嗯，覆盖容器的交叉轴入方式，比如说我们想给第三个元素，对吧，设置完全占用剩余的空间，那么我们就可以来使用这个flas grow这个属性。我们去实现一下啊，目前来说这个不能个组件的话，我们改为改为3个，然后第三个组件怎么样。占满剩余的空间。出来。1。啊，我们去运营一下。哎。可以发现我们的组件3怎么已经占满了，当然这里我们使用反方向对吧，然后这里我们可以把把这个控制。

控制多列单列的，我们给它去掉。直接让他，嗯，从左到右依次排列。哎，总件一总件二总结三对吧，这就是总件3占用了啊剩余的一个空间，OK, 这就是我们的一个flex group这个这个属性，这个大家作为一个了解啊。嗯，行，那么我们还差最后一个案例，然后我们去实现一下啊，也就是说。我们最终想要实现一个什么效果，就是历历史搜索这种的效果可以实现我们的你的，哎，元素怎么着啊也。达到我们一个多列的不规则的一个呃，排列的方式，那么最后呢，我们就把这个相关案例，然后去给大家去实现一下，OK.呃，首先呢，在实际的开发当中啊，你这肯定你的历史搜索也好，你的热门搜索也好，肯定它是一个，呃，你从远端也是从服务端拿到这些数据，对吧，一般这些数据呢，都是一个集合，或者说是一个数组，这里呢我们去定义一下。

Date.累死的。好，我们给他，嗯。对，List它是一个数字，我们给他几个。数据啊。比如说。程序啊。1名。还有是APP。啊。干货部。更新啊。就要。

简单测试。一下。鸿蒙对吧，鸿鸿蒙开发必须我们把鸿蒙也占了鸿蒙。也就我们那什么。好吗，Next.嗯，基本上这些数据基本上就够了，我们主要是简单做一个测试，OK, 那么我们这个子组件怎么着就不能说去写死了，一定要根据你的哎数字对吧，而来这里我们就可以使用一个-1。把我们的这个集合对吧，放上去。这是一个什么，我们的一个。还他妈熟悉。嗯。

OK, 那么我们怎么着？你要想要实现多列，那么我们必须要实现哪个属性？哎，外部属性，这个刚才已经跟大家说过了，外部属性。Flex.外B第一个什么，哎，OK, 好多列已经实现了，那我们就可以写我们的一个什么，哎。子子院对吧，一个排列方式，我们给他一个什么哎。把我们的一个。Item就是当前的当前的那个呃，元素给它添加进来，那这里呢，我们给它设置一个背景颜色吧，便议大家能够查看，也是灰色吧，看到点儿。嗯，然后呢，给他一个编剧吧，方便方便能够查看。编剧给他一个right，来一个实首，然后呢，Bottom呢，这里下面也给他一个10。

稍微给他一个圆角系数吧，圆角角度。等于一个5。嗯，当然了，为了能更加的直观的看到，我们给他一个内编剧了。Left是right。是上下，我们给他5。Bottom, 我们也给他一个。好，我们去再去运行一下看看效果。哎，是不是我们就可以，哎达到了我们啊，刚才文档中对吧，所说的一个效果就是什么一个流失布局的一个效果，当然了这些数据呢，都是咱们，呃测试对吧，测试测试的数据，一般情况下，刚才也也说了，这些数据呢，都是从服务端里拿到的数据，当然了，嗯，还有一个啊，就是关于我们的历史搜索，它是通过搜索框对吧，进行搜索，进行存我们本地或者说远端作为一个存储，一般的这个搜搜索内容呢，都有一个最大阀门，比如说我最多展示10个，那么你在搜索的情况下，就会把最后一个移图，呃，把新搜索的放在。

啊，第一个位置当然了，这是我关于整个的一个，呃，搜索控件的一个一个实现的一个方式嘛，啊这里呢，我们只是介绍一下我们一个flex的一个组件啊。行，呃，关于flax图像呢，基本上我们就介绍完了，我们最主要的是掌握住它的是一个什么，一个方向对吧，方向属性你是啊横向或者是纵向还是反方向等等，还有一个什么，我们外部去实现，我们的单列多列的形式，通过单列多列我们就可以实现，哎，我们的一个流失布局的效果同样的，呃，还有就是它的一些其他的，比如说嗯。对齐方式啦，对吧？呃，对齐方式还有我们一个子元素的一个属性是占用那个呃剩余空间，嗯，这个大家作为一个了解即可。

嗯。OK, 呃，这里有一个注意事项啊，就是说，嗯，在实际的开发当中呢，呃，我需要掌握住主轴与交叉轴的关系，换行与规则以及子元素属性，同时呢，我们要注意性能与那个兼容性的问题，还有一点就是flex组件呢，在渲染时会存在二次布局的过程，因此在对性能有严格要求的场景下呢。哎，我们还是建议什么使用你的呃，烤冷馍的肉来代替。对吧，如果说我们的横向布局或者说纵向布局能够实现我们的一个效果的话，尽量是用呃克拉姆或者肉。如果说我们想要实现那种不规则的对吧，流失布局战略样式，那么我们嗯要求自4啊，只能使用这个反射组件OK行，在实际的开发中中呢，大家还要是呃，大家根据自己的需求，然后选择呃对应的正确的啊容器组件OK，咱们这个视频就先到这里，感谢大家，谢谢。