前言

上回我们探索了Flutter中的main.dart的整个结构,使用了Text和ListView两个widget部件，并通过这些结构同我们的iOS开发做了相应的类比。今天我们继续探索下Flutter的布局方式。

布局的分类

在flutter中主要有以下三种布局：
Row：横向（行）布局
Column：纵向（列）布局
Stack：栈（Z轴）布局

Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-13 at 14.33.04.png

其实如果有做过RN项目的同学对这三种布局还是非常熟悉的，包括内部的一些概念都略微的相似，接下来我们对以上3中布局详细介绍：

Row()

还是从一个代码片段开始说起

class RowLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(   //这里就是一个UIView容器
      color: Colors.blue,  //UIView.backgroundColor
      //如果不指定height和width,默认由子视图的宽高自动撑开
      height: 300,          //UIView.frame.size.height
      width: 300,           //UIView.frame.size.width
      child: Row(        // 对UIView容器设置一种排列方式(这里就是横向布局)
        children: [      //UIView.subViews  子视图横向排列
          Container(     // subView0
            color: Colors.red,
            child: Icon(Icons.add,size: 30),   //Icon部件 这个不用多解释了
          ),
          Container(  //subView1
            color: Colors.white,
            child: Icon(Icons.ac_unit,size: 30),
          ),
          Container(  //subView2
            color: Colors.green,
            child: Icon(Icons.access_alarm,size: 30),
          ),
          Container(  //subView3
            color: Colors.yellow,
            child: Icon(Icons.access_time,size: 30),
          ),
        ],
      ),
    );
  }
}

Row.png
从我们ios开发的角度来讲，一个视图容器创建后可以设置它容器内的布局方式，而子视图会根据容器的设置的布局方式进行排列，是不是非常的简单；
默认情况下Row布局后的子元素默认为上下居中，然后靠左对齐依次排列。此时我们可以通过Row()里的mainAxisAlignment (主轴对齐方式)和crossAxisAlignment(交叉轴)属性来修改他的对齐方式,在Row()布局中的主轴指的就是x轴,交叉轴就是y轴；

......
child: Row(
   mainAxisAlignment: MainAxisAlignment.end,   //设置为右对齐排列
    //start center end  spaceAround  spaceBetween 等可以设置玩一玩儿
    //跟RN的方式很像
   crossAxisAlignment:CrossAxisAlignment.start, //设置为顶部对齐start center end

        // 这样设置后 subViews 会在容器的右上角水平排列
        children: [
          Container(
            color: Colors.red,
            child: Icon(Icons.add,size: 30),
          ),
          Container(
            color: Colors.white,
            child: Icon(Icons.ac_unit,size: 30),
          ),
          .........
        ],
      ),
......

Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-13 at 15.45.03.png

其实没有什么难度,知道这些属性后，自己亲自实践一下就知道了。

Column()

刚介绍完Row() 其实再说Column()就非常简单了，需要注意的是此时的mainAxisAlignment 是y轴，crossAxisAlignment是x轴；
我们直接把上面代码中的Row替换成Column默认情况下容器内的子视图会水平居中,并从上往下排列显示

class ColumnLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 300,
      width: 300,
      child: Column(
//        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//        crossAxisAlignment:CrossAxisAlignment.end,
        children: [
          Container(
            color: Colors.red,
            child: Icon(Icons.add,size: 30),
          ),
          Container(
            color: Colors.white,
            child: Icon(Icons.ac_unit,size: 30),
          ),
          Container(
            color: Colors.green,
            child: Icon(Icons.access_alarm,size: 30),
          ),
          Container(
            color: Colors.yellow,
            child: Icon(Icons.access_time,size: 30),
          ),
        ],
      ),
    );
  }
}

不多解释了，如图：

Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-13 at 16.00.27.png

Stack()

这个就很好理解了，在我的iOS开发中经常使用的UIView.addSubView:就是一种Stack方式添加视图，最先添加的View在栈底，而最后添加的View在栈顶。我们还是上面的那份代码，我们直接把Column改成Stack，然后把子视图中的Icon的大小稍作调整，来感受Stack的栈层次，上代码：

class StackLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 300,
      width: 300,
      child: Stack(
        children: [
          Container(
            color: Colors.red,
            child: Icon(Icons.add,size: 80),
          ),
          Container(
            color: Colors.white,
            child: Icon(Icons.ac_unit,size: 60),
          ),
          Container(
            color: Colors.green,
            child: Icon(Icons.access_alarm,size: 40),
          ),
          Container(
            color: Colors.yellow,
            child: Icon(Icons.access_time,size: 20),
          ),
        ],
      ),
    );
  }
}

Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-13 at 16.12.35.png

接下来介绍一下在Stack布局中使用到的部件Positioned,我们可以通过它内部的top,right,bottom,left属性,来修改子视图的位置(这个就类似于iOS下的autoLayout了,今后应该比较常用)
上代码

class StackLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 300,
      width: 300,
      child: Stack(
        children: [
          Positioned(
            right: 10,
            bottom: 10,
            child: Container(
              color: Colors.red,
              child: Icon(Icons.add,size: 80),
            ),
          ),
          Positioned(
            right: 10,
            top: 10,
            child: Container(
              color: Colors.white,
              child: Icon(Icons.ac_unit,size: 60),
            ),
          ),
          Positioned(
            left: 10,
            bottom: 10,
            child: Container(
              color: Colors.white,
              child: Icon(Icons.access_alarm,size: 40),
            ),
          ),
          Positioned(
            left: 10,
            top: 10,
            child: Container(
              color: Colors.white,
              child: Icon(Icons.access_time,size: 30),
            ),
          )
        ],
      ),
    );
  }
}

Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-13 at 16.32.07.png

总结

本篇文章对flutter常见的3种布局方式做一些简单的介绍，让大家对它有个初步的认识，我会在之后的项目中，特别是UI构建中，根据具体的页面，会对这几种布局方式做更加详细的使用，而且这些布局方式必然会层层嵌套来达到页面效果，请大家持续关注。。。