线性布局

不管是水平布局或是垂直布局都是布局上常用的配置方式。

布局组件

• Row
• Column
• Wrap

Layout

Flutter 目标是提供跨平台的开发体验，因此需要提供弹性的方式来处理呈现平台上布局的行为。在官网上提供了许多的组件，依照特性可以分为这三个种类：

• Single-child layout

这个布局类别的组件通常具有一个 child 的属性，例如Container、SizeBox…。

• Multi-child layout

这个布局类别的组件通常具有一个 children 的属性，例如Row、Column…。

• Sliver

这个布局类别的组件只能是 Sliver 类别，例如SliverList、SliverGrid、SliverAppBar…。

Row、Column

线性布局是很常见的排列方式，Row 是以水平的方向进行排列，Column是以垂直的方向进行排列。

Row 和 Column 的使用方式相类似，只差在排列的方向不一样，都是属於 Multi-child layout 类别的一员，在排列行为又可切分成主轴设定与纵轴设定两种，我们直接看下面的范例看看差异性在哪边：

 var theRow = Container(
      margin: const EdgeInsets.all(5.0),
      padding: const EdgeInsets.all(3.0),
      decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
      // 可以更换 Colume 为 Row，理解主轴和纵轴设定差别
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("ABC"),
          Text(
            "DEF",
            style: TextStyle(
              fontSize: 40.0,
            ),
          ),
          Text("GHI")
        ],
      ),
    );

    var theColumn = Container(
      margin: const EdgeInsets.all(5.0),
      padding: const EdgeInsets.all(3.0),
      decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
      // 可以更换 Colume 为 Row，理解主轴和纵轴设定差别
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text("ABC"),
          Text(
            "DEF",
            style: TextStyle(
              fontSize: 40.0,
            ),
          ),
          Text("GHI")
        ],
      ),
    );

Wrap

在 Row 或是 Column 使用上，若 children 的元素内容大小超过可显示的范围时，会出现类似下面这种提示画面。

我们可以使用Wrap来提供 children 里的元素在无法预期内容大小时提供一个弹性排列的方法。在渲染过程会按顺列放到画面上并计算是否会有溢出的状况，若超过则会将该元件放到下一行。spacing用来定义两个元素的距离，runSpacing用来定义上下两排的距离，alignment 则是可以定义每一列的配置方式。

    var theWrap = Wrap(
      spacing: 30.0,
      runSpacing: 15.0,
      alignment: WrapAlignment.center,
      children: <Widget>[
        Text("ABCDEFGHIJKLKNPQRSTUVWXYZ" * 1),
        Text("0123456789"),
        Text("零一二三四五六七八九" * 5), // 溢出
        Text("0123456789"),
      ],
    );

小结

练习成果