弹性布局

介绍完线性排列的布局方式，今天我们谈谈另外的配置方式的布局组件。

挑战目标

学习 widget

• Flex
  • Expanded
  • Spacer
• Stack
  • Positioned
• Align

Flex

Flex 是可以主轴为排列方向的组件，Row 和 Column 也只是继承 Flex 而来的，因此它们三个之间的参数设定其实大同小异，Flex 可以设定 direction 属性为 Axis.vertical 或是 Axis.horizontal，确认主轴方向的话，可以直接使用 Row 和 Column 从字面上会比较直觉。

不过既然名称命名为 Flex (弹性) 就代表这个组件比起其他布局组件应该会具备一些不一样的特色功能，这个就需要搭配Expanded 和 Spacer这两个组件的设定。

注意：这两个参数的使用只能够应用在 Flex、Column、Row的children，若搭配其他布局组件会发生错误。

• Expanded

Flex组件类别下的子元素设定，可以透过flex设定占用的主轴的空间比例大小，这个强制将 child 扩展成对应的比例大小。

我们从下方的范例来看，在一个容器高度为100的空间中使用 Flex 组件设定主轴方向为 vertical。上面配置文字区块显示"德国"，下面在使用 Expanded 配合 flex 属性为 1 完成了国旗的呈现。这边的子元素扣除文字所需的高度後，将主轴上剩下的空间平均配置给了德国国旗的三个颜色方块。

    var theFlex = Container(
      width: 150,
      height: 145,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent),
      ),
      child: Flex(
        direction: Axis.vertical,
        children: [
          Container(
            child: Text("德国"),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Color(0xFF000000),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Color(0xFFFF0000),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Color(0xFFFFCC00),
            ),
          ),
        ],
      ),
    );

• Spacer

Spacer 只有具有 flex 单一属性，不过没有 child，主要用来填补组件中间的空白位置。

Stack

Stack 的布局方式与css中的绝对定位很类似，可以透过四个边(top、left、right、bottom)的距离设定对应的位置，这个组件可将子元素一个一个堆叠到一个空间上，其子元素需要使用Positioned设定位置参数。

var theStack = Container(
      width: 300,
      height: 150,
      color: Colors.blue[300],
      child: Stack(
        children: [
          square,
          Positioned(
            top: 50.0,
            left: 50.0,
            child: square,
          ),
          Positioned(
            bottom: 50.0,
            right: 0.0,
            child: square,
          ),
        ],
      ),
    );

第一个绿色方块，我没有使用Positioned指定，因此会出现在预设的"原点"上。第二个元素。

第二个绿色方块，给定top 50.0 left 50.0，定位在离左边和上面各50的距离。

第三个绿色方块，给定right 0.0 bottom 50.0，定位在离右边的边上以及离底部50的距离。

Align

比起 Stack 搭配 Positioned，若只有一个子元素需要座标的定位时，Align可以提供简单的布局配置，范例如下。

属性alignment是从抽象类别AlignmentGeometry来的，这个抽象类别的定位方式可以简单的使用AlignmentDirectional设定，也可以用根据原点Alignment照比例的方式做配置。

    var theAlignWithAlignment = Container(
      width: 200,
      height: 100,
      margin: const EdgeInsets.all(5.0),
      color: Colors.blue[300],
      child: Align(
        // 同等於 Alignment(0.0, -1.0)
        alignment: AlignmentDirectional.topCenter,
        child: square,
      ),
    );

Alignment(0.0, 0.0) 预设是以容器的中心点为原点，若想要改变成较习惯的左上角为原点，可以改用
FractionalOffset 进行设定。

    var theAlignWithFractionalOffset = Container(
      width: 200,
      height: 100,
      margin: const EdgeInsets.all(5.0),
      color: Colors.blue[300],
      child: Align(
        alignment: FractionalOffset(0.0, 0.0),
        child: square,
      ),
    );

小结

练习成果

今日学习了在 Expanded、Spacer 可以在有主轴设定的组件上调整组件的位置，在线性排列上多了更多的弹性；另外也介绍了 Stack 与 Align 可以在一个容器的区块，透过绝对路径的设定让组件呈现在想要的座标位置上。