九、Flutter经常使用布局-Stack层叠布局

1、层叠布局Stack的使用

水平布局和垂直布局确实很好用，可是有一种状况是没法完成的，好比放入一个图片，图片上再写一些字或者放入容器。这时就能够考虑使用Stack层叠布局。

/**
 * 层叠布局
 */
class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: FractionalOffset(0.9, 0.5),
      children: <Widget>[
        Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569660771470&di=8d3c09e5830a1a5667b25385bdaacf20&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b44b5d511452a8012187f4acf159.jpg%401280w_1l_2o_100sh.jpg"),
        Container(
          child: Text("坐北朝南吃西瓜皮朝东甩", style: TextStyle(fontSize: 20.0)),
          width: 20.0,
        )
      ],
    );
  }
}

实现效果：

层叠布局的alignment属性

alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的。

若是是超过两个组件的层叠该如何进行定位？那就要使用层叠定位组件Positioned组件了。

Positioned组件的属性

• bottom: 距离层叠组件下边的距离
• left：距离层叠组件左边的距离
• top：距离层叠组件上边的距离
• right：距离层叠组件右边的距离
• width: 层叠定位组件的宽度
• height: 层叠定位组件的高度

/**
 * 层叠布局-层叠定位组件
 */
class StackPositionedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569660771470&di=8d3c09e5830a1a5667b25385bdaacf20&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b44b5d511452a8012187f4acf159.jpg%401280w_1l_2o_100sh.jpg"),
        Positioned(
            top: 10.0,
            left: 115.0,
            child: Container(
              child: Text("我命由我不禁天", style: TextStyle(fontSize: 30.0,color: Colors.red)),
            )),
        Positioned(
            top: 50.0,
            right: 20.0,
            child: Container(
              child: Text("坐北朝南吃西瓜皮朝东甩", style: TextStyle(fontSize: 20.0)),
              width: 20.0,
            )),
        Positioned(
            top: 50.0,
            left: 20.0,
            child: Container(
              child: Text("思前想后读左传页往右翻", style: TextStyle(fontSize: 20.0)),
              width: 20.0,
            ))
      ],
    );
  }
}

实现效果：