乐趣区

Flutter学习之相对布局

jiezi

注：所有文章均不会详细讲解基础 widget 的使用，大家可以查看官方文档，如有使用问题可以在评论中提出。前期搭建环境工作还没准备好的小伙伴，可以我的上一篇找官方文档链接，跟着官方文档就行了。

前言

从今天开始，我将记录在学习 Flutter 过程中的遇到的一些具体问题，对照着 Android 中的实现用 Flutter 去解决这些问题，并且会对用到的 widget 讲解一些自己的理解，方便大家更好的学习Flutter。

还有重要的一点要提，大家一定牢记于心，就像???? 你太美一样????：

Flutter 中万物皆 widget！！！

Flutter 中万物皆 widget！！！

Flutter 中万物皆 widget！！！

重要的事情说三遍。

Action

俩个控件相对父布局，居左和居右

我们先来看一下大概的效果是什么样的：

蓝色框框圈出来就是我们要实现的布局，这种两个 view 分别居父布局的左边和右边，大家应该很常见。在 Android 当中，一个 RelativeLayout 中放两个 TextView，然后给后面一个 TextView 设置layout_alignParentRight 就可以了 (第一个TextView 默认已经从左边开始)，或者也有小伙伴说用 ConstraintLayout 也可以实现，总之在 Android 中这类布局很容易实现。

那我们 Flutter 中应该怎么实现？

准备

首先我先说一下 Flutter 中的基础 widget 和Android中的 View 的区别，就拿 Flutter 中的 Text 和Android中的 TextView 做比较：

  1. Text在 Flutter 中只负责文字的显示，连设置宽高的属性都没有，更别说 TextView 的margin和 padding 属性了 (其他基础widget 也是，包括 Image，RaisedButton 等等)。所以我理解的是 Flutter 中的这些基础 widget 只负责自己的单一职责，比如Text，只负责文本的显示。
  2. 因为这些 widget 没有移动自己位置的属性，所以 Flutter 中就有了 align，padding 等等这些 widget 来给移动基础 widget 的位置。
  3. Text可以通过 textAlign 来设置内部文字的位置，类似 TextView 的Gravity属性。但是 Text 没有类似 Layout_Gravity 属性。

实现

好了，说了这么多，我们来看 Flutter 中的具体实现，Flutter 中也有多种实现方式，下面我们一一讲解。

1. 通过 Stack 和 Align 实现

直接上代码：

//Stack 类似 FrameLayout, 子 widget 可以通过父容器的四个角固定位置，子 widget 可以重叠。Stack(
   children: <Widget>[
     // 可以通过 alignment 属性，设置其子 widget 与其对齐方式，默认 center；// 所以下面我们分别给注册和登录设置了居左和居右
     Align(
       alignment: Alignment.centerLeft,
       child: Text(
         "注册",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
     ),
     Align(
       alignment: Alignment.centerRight,
       child: Text(
         "忘记密码",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
     ),
   ],
 ),
2. 通过 Row 和其 mainAxisAlignment 属性

还是直接上代码：

//Row 在水平方向布局 widget，类似 Android 中设置了 horizontal 的 LinearLayout
Row(
  //Row 是在水平方向布局子 widget，所以 mainAxisAlignment 是指子 widget 在水平方向上的位置。具体属性下面具体讲解
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
     Text(
         "注册",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
      Text(
         "忘记密码",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
   ],
 ),

其实我才开始做这个布局的时候，我第一个想到的就是用 Row，但是并没有类似RelativeLayout 那种子 View 可以设置居左，居右的属性。加上才开始学的不仔细，就放弃这种方式了，用第一种方式实现了。不过经过后面的学习，发现 Row 其实是可以实现的。

大家其实看上面的代码，比第一种实现方式代码反而更简单。相信大家也注意到重点了，就是这句代码

mainAxisAlignment: MainAxisAlignment.spaceBetween

我才开始只是简单使用了 MainAxisAlignment.start/center/end 这几个属性，所以没实现成功。后面我专门看了下剩下几个属性, 如下：

// 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

源码注释我放出来了，大家可以先看一下，自己先理解一下。因为我觉得这几个属性还是比较难理解的，所以准备在下一篇中详细讲解。

哦，忘记放出上面两种实现效果了，来了，biubiu！

详细代码我也都上传到 gayhub 上面了 FlutterTour，这个项目我将会持续记录所有实例代码，欢迎大家动动小手，给个 star 吧????????????。

退出移动版