九、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,
            ))
      ],
    );
  }
}

實現效果：