Stack 堆叠布局

可容纳多个组件，以堆叠的方式摆放子组件，后者居上。拥有alignment属性，可与Positioned组件联合使用，精确定位。

相关组件

Flex Row IndexedStack

Stack基本使用

   <br />【children】 : 组件列表   【List<Widget>】<br />【textDirection】 : 孩子排布方向   【MainAxisAlignment】<br />【alignment】 : 对齐方式   【AlignmentGeometry】<br />【overflow】 : 溢出模式   【Overflow】<br />【fit】 : 适应模式   【StackFit】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589509083353-e79a3e04-d766-4278-9b89-d673e6553c5e.png#align=left&display=inline&height=164&margin=%5Bobject%20Object%5D&name=image.png&originHeight=164&originWidth=296&size=2555&status=done&style=none&width=296)

import 'package:flutter/material.dart';
class CustomStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    var cyanBox = Container(
      color: Colors.cyanAccent,
      height: 70,
      width: 70,
    );

    return Container(
      width: 200,
      height: 120,
      color: Colors.grey.withAlpha(33),
      child: Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.topRight,
        overflow: Overflow.clip,
        children: <Widget>[yellowBox, redBox, greenBox, cyanBox],
      ),
    );
  }
}

Stack和Positioned结合使用

   <br />Positioned组件只能用与Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589509094501-e43abdb9-1206-4a94-8036-ea41e72ec622.png#align=left&display=inline&height=151&margin=%5Bobject%20Object%5D&name=image.png&originHeight=151&originWidth=295&size=2348&status=done&style=none&width=295)

import 'package:flutter/material.dart';
class PositionedStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    var cyanBox = Container(
      color: Colors.cyanAccent,
      height: 70,
      width: 70,
    );

    return Container(
        width: 200,
        height: 120,
        color: Colors.grey.withAlpha(33),
        child: Stack(
          children: <Widget>[yellowBox, redBox, greenBox,
            Positioned(
              child: cyanBox,
              bottom: 10,
              right: 10,
            )
          ],
        ));
  }
}