Flutter 布局

前言一：接下来一段时间我会陆续更新一些列 Flutter 文字教程

更新进度： 每周至少两篇；

更新地点： 首发于公众号，第二天更新于掘金、思否、开发者头条等地方；

更多交流： 可以添加我的微信 372623326，关注我的微博：coderwhy

希望大家可以 帮忙转发，点击在看，给我更多的创作动力。

前言二：为了实现界面内组件的各种排布方式，我们需要进行布局，和其他端不同的是，Flutter 中因为万物皆 Widget，所以布局也是使用 Widget 来完成的。

Flutter 中的布局组件非常多，有 31 个用于布局的组件，Flutter 布局组件；

在学习的过程中，我们没必要一个个全部掌握，掌握最常用的，一些特殊的组件用到时去查文档即可；

Flutter 将布局组件分成了 单子布局组件 （Single-child layout widgets）和 多子布局组件（Multi-child layout widgets）

一. 单子布局组件

单子布局组件的含义是其只有一个子组件，可以通过设置一些属性设置该子组件所在的位置信息等。

比较常用的单子布局组件有：Align、Center、Padding、Container。

1.1. Align 组件

1.1.1. Align 介绍

看到 Align 这个词，我们就知道它有我们的对齐方式有关。

在其他端的开发中（iOS、Android、前端）Align 通常只是一个属性而已，但是 Flutter 中 Align 也是一个组件。

我们可以通过源码来看一下 Align 有哪些属性：

const Align({
  Key key,
  this.alignment: Alignment.center, // 对齐方式，默认居中对齐
  this.widthFactor, // 宽度因子，不设置的情况，会尽可能大
  this.heightFactor, // 高度因子，不设置的情况，会尽可能大
  Widget child // 要布局的子 Widget
})

这里我们特别解释一下 widthFactor 和heightFactor作用：

• 因为子组件在父组件中的对齐方式必须有一个前提，就是父组件得知道自己的范围（宽度和高度）；
• 如果 widthFactor 和heightFactor不设置，那么默认 Align 会尽可能的大（尽可能占据自己所在的父组件）；
• 我们也可以对他们进行设置，比如 widthFactor 设置为 3，那么相对于 Align 的宽度是子组件跨度的 3 倍；

1.1.2. Align 演练

我们简单演练一下 Align

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(child: Icon(Icons.pets, size: 36, color: Colors.red),
      alignment: Alignment.bottomRight,
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}

1.2. Center 组件

1.2.1. Center 介绍

Center 组件我们在前面已经用过很多次了。

事实上 Center 组件继承自 Align，只是将 alignment 设置为 Alignment.center。

源码分析：

class Center extends Align {
  const Center({ 
    Key key, 
    double widthFactor, 
    double heightFactor, 
    Widget child 
  }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

1.2.2. Center 演练

我们将上面的代码 Align 换成 Center

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Icon(Icons.pets, size: 36, color: Colors.red),
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}

1.3. Padding 组件

1.3.1. Padding 介绍

Padding 组件在其他端也是一个属性而已，但是在 Flutter 中是一个 Widget，但是 Flutter 中没有 Margin 这样一个 Widget，这是因为外边距也可以通过 Padding 来完成。

Padding 通常用于设置子 Widget 到父 Widget 的边距（你可以称之为是父组件的内边距或子 Widget 的外边距）。

源码分析：

const Padding({
  Key key,
  @required this.padding, // EdgeInsetsGeometry 类型（抽象类），使用 EdgeInsets
  Widget child,
})

1.3.2. Padding 演练

代码演练：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(padding: EdgeInsets.all(20),
      child: Text(
        "莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
        style: TextStyle(
          color: Colors.redAccent,
          fontSize: 18
        ),
      ),
    );
  }
}

1.4. Container 组件

Container 组件类似于其他 Android 中的 View，iOS 中的 UIView。

如果你需要一个视图，有一个背景颜色、图像、有固定的尺寸、需要一个边框、圆角等效果，那么就可以使用 Container 组件。

14.1. Container 介绍

Container 在开发中被使用的频率是非常高的，特别是我们经常会将其作为容器组件。

下面我们来看一下 Container 有哪些属性：

Container({
  this.alignment,
  this.padding, // 容器内补白，属于 decoration 的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, // 前景装饰
  double width,// 容器的宽度
  double height, // 容器的高度
  BoxConstraints constraints, // 容器大小的限制条件
  this.margin,// 容器外补白，不属于 decoration 的装饰范围
  this.transform, // 变换
  this.child,
})

大多数属性在介绍其它容器时都已经介绍过了，不再赘述，但有两点需要说明：

• 容器的大小可以通过 width、height 属性来指定，也可以通过 constraints 来指定，如果同时存在时，width、height优先。实际上 Container 内部会根据 width、height 来生成一个constraints；
• color和 decoration 是互斥的，实际上，当指定 color 时，Container 内会自动创建一个 decoration；
• decoration属性稍后我们详细学习；

1.4.2. Container 演练

简单进行一个演示：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(color: Color.fromRGBO(3, 3, 255, .5),
        width: 100,
        height: 100,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
      ),
    );
  }
}

1.4.3. BoxDecoration

Container 有一个非常重要的属性 decoration：

• 他对应的类型是 Decoration 类型，但是它是一个抽象类。
• 在开发中，我们经常使用它的实现类 BoxDecoration 来进行实例化。

BoxDecoration 常见属性：

  const BoxDecoration({
    this.color, // 颜色，会和 Container 中的 color 属性冲突
    this.image, // 背景图片
    this.border, // 边框，对应类型是 Border 类型，里面每一个边框使用 BorderSide
    this.borderRadius, // 圆角效果
    this.boxShadow, // 阴影效果
    this.gradient, // 渐变效果
    this.backgroundBlendMode, // 背景混合
    this.shape = BoxShape.rectangle, // 形变
  })

部分效果演示：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(//        color: Color.fromRGBO(3, 3, 255, .5),
        width: 150,
        height: 150,
        child: Icon(Icons.pets, size: 32, color: Colors.white),
        decoration: BoxDecoration(
          color: Colors.amber, // 背景颜色
          border: Border.all(
            color: Colors.redAccent,
            width: 3,
            style: BorderStyle.solid
          ), // 这里也可以使用 Border.all 统一设置
//            top: BorderSide(
//              color: Colors.redAccent,
//              width: 3,
//              style: BorderStyle.solid
//            ),
          borderRadius: BorderRadius.circular(20), // 这里也可以使用.only 分别设置
          boxShadow: [
            BoxShadow(offset: Offset(5, 5),
              color: Colors.purple,
              blurRadius: 5
            )
          ],
//          shape: BoxShape.circle, // 会和 borderRadius 冲突
          gradient: LinearGradient(
            colors: [
              Colors.green,
              Colors.red
            ]
          )
        ),
      ),
    );
  }
}

1.4.4. 实现圆角图像

上一个章节我们提到可以通过 Container+BoxDecoration来实现圆角图像。

实现代码如下：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
          image: DecorationImage(image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
          )
        ),
      ),
    );
  }
}

二. 多子布局组件

在开发中，我们经常需要将多个 Widget 放在一起进行布局，比如水平方向、垂直方向排列，甚至有时候需要他们进行层叠，比如图片上面放一段文字等；

这个时候我们需要使用多子布局组件（Multi-child layout widgets）。

比较常用的多子布局组件是 Row、Column、Stack，我们来学习一下他们的使用。

2.1. Flex 组件

事实上，我们即将学习的 Row 组件和 Column 组件都继承自 Flex 组件。

• Flex 组件和 Row、Column 属性主要的区别就是多一个 direction。
• 当 direction 的值为 Axis.horizontal 的时候，则是 Row。
• 当 direction 的值为 Axis.vertical 的时候，则是 Column。

在学习 Row 和 Column 之前，我们先学习 主轴 和交叉轴 的概念。

因为 Row 是一行排布，Column 是一列排布，那么它们都存在两个方向，并且两个 Widget 排列的方向应该是对立的。

它们之中都有主轴（MainAxis）和交叉轴（CrossAxis）的概念：

• 对于 Row 来说，主轴（MainAxis）和交叉轴（CrossAxis）分别是下图

• 对于 Column 来说，主轴（MainAxis）和交叉轴（CrossAxis）分别是下图

2.1. Row 组件

2.1.1. Row 介绍

Row 组件用于将所有的子 Widget 排成一行，实际上这种布局应该是借鉴于 Web 的 Flex 布局。

如果熟悉 Flex 布局，会发现非常简单。

从源码中查看 Row 的属性：

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式
  MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向尽可能大
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉处对齐方式
  TextDirection textDirection, // 水平方向子 widget 的布局顺序（默认为系统当前 Locale 环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））VerticalDirection verticalDirection = VerticalDirection.down, // 表示 Row 纵轴（垂直）的对齐方向
  TextBaseline textBaseline, // 如果上面是 baseline 对齐方式，那么选择什么模式（有两种可选）List<Widget> children = const <Widget>[],}) 

部分属性详细解析：（不过文字是真的难描述，后续推出视频学习较差）

mainAxisSize：

• 表示 Row 在主轴 (水平) 方向占用的空间，默认是MainAxisSize.max，表示尽可能多的占用水平方向的空间，此时无论子 widgets 实际占用多少水平空间，Row 的宽度始终等于水平方向的最大宽度
• 而 MainAxisSize.min 表示尽可能少的占用水平空间，当子 widgets 没有占满水平剩余空间，则 Row 的实际宽度等于所有子 widgets 占用的的水平空间；

mainAxisAlignment：表示子 Widgets 在 Row 所占用的水平空间内对齐方式

• 如果 mainAxisSize 值为MainAxisSize.min，则此属性无意义，因为子 widgets 的宽度等于 Row 的宽度
• 只有当 mainAxisSize 的值为 MainAxisSize.max 时，此属性才有意义
• MainAxisAlignment.start表示沿 textDirection 的初始方向对齐，
• 如 textDirection 取值为 TextDirection.ltr 时，则 MainAxisAlignment.start 表示左对齐，textDirection 取值为 TextDirection.rtl 时表示从右对齐。
• 而 MainAxisAlignment.end 和MainAxisAlignment.start正好相反；
• MainAxisAlignment.center表示居中对齐。

crossAxisAlignment：表示子 Widgets 在纵轴方向的对齐方式

• Row 的高度等于子 Widgets 中最高的子元素高度
• 它的取值和 MainAxisAlignment 一样 (包含start、end、center 三个值)
• 不同的是 crossAxisAlignment 的参考系是 verticalDirection，即 verticalDirection 值为 VerticalDirection.down 时crossAxisAlignment.start指顶部对齐，verticalDirection 值为 VerticalDirection.up 时，crossAxisAlignment.start指底部对齐；而 crossAxisAlignment.end 和crossAxisAlignment.start正好相反；

2.1.2. Row 演练

我们来对部分属性进行简单的代码演练，其他一些属性大家自己学习一下

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[Container(color: Colors.red, width: 60, height: 60),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Container(color: Colors.orange, width: 100, height: 100),
      ],
    );
  }
}

2.1.3. mainAxisSize

默认情况下，Row 会尽可能占据多的宽度，让子 Widget 在其中进行排布，这是因为 mainAxisSize 属性默认值是MainAxisSize.max。

我们来看一下，如果这个值被修改为 MainAxisSize.max 会什么变化：

2.1.4. TextBaseline

关于 TextBaseline 的取值解析

2.1.5. Expanded

如果我们希望红色和黄色的 Container Widget 不要设置固定的宽度，而是占据剩余的部分，这个时候应该如何处理呢？

这个时候我们可以使用 Expanded 来包裹 Container Widget，并且将它的宽度不设置值；

• flex 属性，弹性系数，Row 会根据两个 Expanded 的弹性系数来决定它们占据剩下空间的比例

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(color: Colors.red, height: 60),
        ),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Expanded(
          flex: 1,
          child: Container(color: Colors.orange, height: 100),
        )
      ],
    );
  }
}

2.2. Column 组件

Column 组件用于将所有的子 Widget 排成一列，学会了前面的 Row 后，Column 只是和 row 的方向不同而已。

2.2.1. Column 介绍

我们直接看它的源码：我们发现和 Row 属性是一致的，不再解释

  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],})

2.2.2. Column 演练

我们直接将 Row 的代码中 Row 改为 Column，查看代码运行效果：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(color: Colors.red, width: 60),
        ),
        Container(color: Colors.blue, width: 80, height: 80),
        Container(color: Colors.green, width: 70, height: 70),
        Expanded(
          flex: 1,
          child: Container(color: Colors.orange, width: 100),
        )
      ],
    );
  }
}

2.3. Stack 组件

在开发中，我们多个组件很有可能需要重叠显示，比如在一张图片上显示文字或者一个按钮等。

在 Android 中可以使用 Frame 来实现，在 Web 端可以使用绝对定位，在 Flutter 中我们需要使用层叠布局 Stack。

2.3.1. Stack 介绍

我们还是通过源码来看一下 Stack 有哪些属性：

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],}) 

参数 j 解析：

• alignment：此参数决定如何去对齐没有定位（没有使用 Positioned）或部分定位的子 widget。所谓部分定位，在这里 特指没有在某一个轴上定位：left、right 为横轴，top、bottom 为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
• textDirection：和 Row、Wrap 的 textDirection 功能一样，都用于决定 alignment 对齐的参考系即：textDirection 的值为 TextDirection.ltr，则 alignment 的start 代表左，end代表右；textDirection 的值为 TextDirection.rtl，则 alignment 的start 代表右，end代表左。
• fit：此参数用于决定 没有定位 的子 widget 如何去适应 Stack 的大小。StackFit.loose表示使用子 widget 的大小，StackFit.expand表示扩伸到 Stack 的大小。
• overflow：此属性决定如何显示超出 Stack 显示空间的子 widget，值为 Overflow.clip 时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

2.3.2. Stack 演练

Stack 会经常和 Positioned 一起来使用，Positioned 可以决定组件在 Stack 中的位置，用于实现类似于 Web 中的绝对定位效果。

我们来看一个简单的演练：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          color: Colors.purple,
          width: 300,
          height: 300,
        ),
        Positioned(
          left: 20,
          top: 20,
          child: Icon(Icons.favorite, size: 50, color: Colors.white)
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Text("你好啊，李银河", style: TextStyle(fontSize: 20, color: Colors.white)),
        )
      ],
    );
  }
}

注意：Positioned 组件只能在 Stack 中使用。

备注：所有内容首发于公众号，之后除了 Flutter 也会更新其他技术文章，TypeScript、React、Node、uniapp、mpvue、数据结构与算法等等，也会更新一些自己的学习心得等，欢迎大家关注