Flutter开发（九）—— 五种布局之Stack Widget层叠布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/RedKeyer/article/details/89552121

继承关系:

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系列中，万磁王最有资格获得勋章！）