Flutter 布局类组件：层叠布局(Stack和Positioned)

前言

层叠布局，即子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位运行子组件堆叠起来，即按照代码中声明的顺序。

Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位，Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。

接口描述

 Stack({
    Key key,
    // 此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。
    // 所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
    this.alignment = AlignmentDirectional.topStart,

    // 和Row、Wrap的textDirection功能一样，都用于确定alignment对齐的参考系，
    // 即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右，即从左往右的顺序；
    // textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左，即从右往左的顺序。
    this.textDirection,

    // 参数用于确定没有定位的子组件如何去适应Stack的大小。
    // StackFit.loose表示使用子组件的大小，StackFit.expand表示扩伸到Stack的大小。
    this.fit = StackFit.loose,

    // 此属性决定如何显示超出Stack显示空间的子组件；值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
  })

const Positioned({
    Key key,
    // left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离
    this.left,
    this.top,
    this.right,
    this.bottom,

    // width和height用于指定需要定位元素的宽度和高度。
    this.width,
    this.height,
    @required Widget child,
  })

代码示例

import 'package:flutter/material.dart';

class StackTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('层叠布局(Stack和Positioned)'),
      ),
      // 通过ConstrainedBox来确保Stack占满屏幕
      body: ConstrainedBox(
        constraints: BoxConstraints.expand(),
        child: Stack(
          // 指定未定位或部分定位widget的对齐方式
          alignment: Alignment.center,
          // 未定位widget会占满Stack整个空间
          fit: StackFit.expand,
          children: <Widget>[
            Container(
              child: Text('Hello world', style: TextStyle(color: Colors.white),),
              color: Colors.red,
            ),
            Positioned(
              left: 18.0,
              child: Text('I am hah'),
            ),
            Container(
              child: Text('Hello ', style: TextStyle(color: Colors.white),),
              color: Colors.red,
            ),
            Positioned(
              top:18.0,
              child: Text('Your dear!'),
            ),

          ],
        ),

      ),
    );
  }
}