Flutter開發（九）—— 五種佈局之Stack Widget層疊佈局

繼承關係:

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Stack

構造方法：

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})

代碼示例：
層佈局中alignment屬性，控制Stack子組件對齊方式。以下代碼中羅列了三類對齊方式：AlignmentDirectional、AlignmentDirectional（x,y）、FractionalOffset。代碼中順帶展示了CircleAvatar的使用，這個可以展示圓形圖片。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      // alignment: AlignmentDirectional.bottomCenter, // alignment：子組件對齊方式 系統默認
      // alignment: const FractionalOffset(0.5, 0.9), //自己指定Stack子組件對齊 ，只對Stack中有兩個子View生效。0.5表示x軸，0.9表示y軸(FractionalOffset  0.5,0.5表示中心)
      //AlignmentDirectional  x、y 偏移量取值範圍爲 [-1,1]，如果 x 的偏移量大於 0，則表示向右偏移，小於 0 則向左偏移；如果 y 軸的偏移量大於 0 則向下偏移，小於 0 則向上偏移。
      alignment: AlignmentDirectional(0, 0), //AlignmentDirectional 0,0表示在正中心。
      fit: StackFit.loose,
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage("https://dwz.cn/JUbcbckN"),
          // radius 數值超過屏幕顯示時，會呈橢圓形顯示。
          radius: 120.0, // CircleAvatar 的半徑 Flutter中的長\寬\半徑 都是小數點後一位
        ),
        new Positioned(
          // Positioned 使層疊佈局的子View，指定位置
          child: CircleAvatar(
            backgroundImage: NetworkImage("https://dwz.cn/dEcFWygO"),
            radius: 25.0,),
          top: 70.0, //隨意調整
          left: 30.0, //隨意調整
        ),
        new Container(
          decoration: BoxDecoration(
            color: Colors.orangeAccent,
          ),
          child: Text("萬磁王"),
          padding: EdgeInsets.all(3.0),
        ),

      ],
    );
    return MaterialApp(
      title: "List",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("GridView"),
        ),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

展示效果：
圖片和文字是層疊展示，代碼先執行的在底層，這個和Android原生的FrameLayout一樣。
Positioned 可以指定精確絕對職位，讓萬磁王手持 X 勳章！ （X系列中，萬磁王最有資格獲得勳章！）