Flutter学习之MainAxisAlignment属性详解

58次阅读

共计 2339 个字符,预计需要花费 6 分钟才能阅读完成。

前言

我们在上一篇文章中,通过两种方式解决了,子 widget 相对父布局居左和居右。第二种方式是通过 Row 中的 MainAxisAlignment 属性实现的,代码非常简单,大家可以去上一篇文章中看看。这篇文章我们将详细讲解 MainAxisAlignment 这个属性里面值得含义,为什么会能完成我们上一篇的效果。当然这个属性不是 Row 特有,Column中也有,只不过 Row 的主轴是水平方向上面的,Column是竖直方向上的。MainAxisAlignment属性就是代表主轴方向的对齐方式。本文我们将以 Row 为例来讲解,Columu其实也是一样的意思,只不过方向不一样。好的,下面我们进入正题。

正文

MainAxisAlignment里面一共有 6 个值,分别是startcenterendspaceBetweenspaceAroundspaceEvenly;前三个相信大家很容易理解,我们重点讲解后面三个值的效果。上一篇我已经留下这三个属性的源码注释了,不知道大家有没有理解,我们再来看一次:

// Place the free space evenly between the children.
MainAxisAlignment.spaceBetween
// Place the free space evenly between the children as well as half of that
// space before and after the first and last child.
MainAxisAlignment.spaceAround
// Place the free space evenly between the children as well as before and
// after the first and last child.
MainAxisAlignment.spaceEvenly

像我这种英语菜鸡,貌似看上去每个单词都认识,但是特么完全不知道啥意思啊????????????。只能看看翻译软件咋翻译的了,没办法,谁叫自己英语这门菜呢????????????。ps:千万别用有道云翻译,根本不知道翻译的啥鬼意思。下面我们看看 Google 翻译的结果:

看过翻译之后,貌似明朗很多。然后我们再配合代码的效果来理解这个属性,效果是这样的:

我分别演示了 Row 中包含 2 个,3 个,4 个子 widget 的效果,更有对比性,可以让大家更好的理解这三个属性。下面我们来一个个解释这些值的含义:

MainAxisAlignment.spaceBetween

我们先来看看 spaceBetween,源码注释给的意思是 将自由空间均匀放置在孩子之间 ,配合我们代码演示的效果。我们可以知道spaceBetween 的作用应该是:

  1. 在父 widget 中,除去子 widget 所占据的空间,将剩余的空间均匀的分配在 widget之间 ,所以我们看到图上每个widget 之间的空白部分是一样的。
  2. 注意上一条我们加粗的部分。因为是将剩余空间均匀分配在 widget之间 ,所以第一个子widge 的前面和最后一个字 widget 后面是没有空间的,这是因为他们的左边和右边都是单独的。
  3. 当只有 2 个子 widget 的时候,这 2 个子 widget 分别居左和居右,就是紧靠在父 widget 两边的。

    所以到了这里,我们应该就能很好的理解上一篇文章为什么能实现那样的效果了吧。因为我们只有 2 个子 widget,就是第 3 条所说的,所以就有了相对父widget 居左和居右的效果啦。

MainAxisAlignment.spaceAround

再来看看 spaceAround将自由空间均匀地放置在孩子之间,以及在第一个孩子和最后一个孩子之前和之后的一半空间 ,我才开始我没太理解这句话的意思,后面配合代码演示的效果,我终于理解了spaceAround 的意思了。

  1. 在父 widget 中,除去子 widget 所占据的空间,将剩余的空间均匀的分配在 子 widget 之间 ,且第一个子 widget 的左边和最后一个子widget 的右边也有均分分配空间的一半。
  2. spaceBetween 的区别就是,第一个子 widget 的左边和最后一个 widget 的右边也有一半的空间。

这种效果,我相信很多 UI 在作图的时候都喜欢用这种效果,多个 view 之间空白均等,第一个和最后一个 view 离屏幕边缘是均等空白的一般。下次遇到这样的 UI 设计,就用 spaceAround 就好啦????????????。

MainAxisAlignment.spaceEvenly

最后一个就是 spaceEvenly,意思是 将自由空间均匀地放置在孩子之间以及第一个和最后一个孩子之前和之后 ,这个结合前面解释的俩个属性,和代码演示的效果,相信大家很容易就能理解。就是所有子widget 之间以及加上第一个子 widget 的左边和最后一个子 widget 的右边,均分剩余的空间。简单理解就是 widget均分父 widget,这个就类似Android 中的 LinearLayoutweight属性,给所有子 view 设置同样的比重,就是均等布局。以后遇到等比布局就可以使用 spaceEvenly 啦????????????。

总结

通过对源码注释的解读,加上配合代码的效果,我相信大家应该理解了 spaceBetweenspaceAroundspaceEvenly 这三个值的意思了,这样以后我们再遇到不用的 UI 布局,使用 Row 的布局将会更加得心应手。再提醒一句,如果是在 Column 在设置这几个值,就是在竖直方向均匀分配,相信大家也很容易理解,我就不演示了。

实例源码地址

MainAxisAlignment的讲解我们就到这啦,如果文章有不对的地方,欢迎大家在评论中提出来,最后祝大家???? 你太美!!!

正文完
 0