Flutter笔记53：Stack层叠组件

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack层叠组件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack层叠组件'),
        ),
        body: Column(
          children: [
            Container(
              width: 300.0,
              height: 100.0,
              color: Colors.red,
              //层叠组件，层叠顺序：后面的元素覆盖前面的元素
              child: Stack(
                //对齐方式
                //子组件对齐方式：同Container的alignment属性，它指定的是所有子组件的对其方式，所以建议在只有两个子组件的时候使用。如果有三个及以上的子组件时，建议使用Positioned包裹子组件来决定子组件的位置，alignment的可选项有：
                //AlignmentDirectional.topCenter：垂直靠顶部水平居中对齐
                //AlignmentDirectional.topStart：垂直靠顶部水平靠右对齐
                //AlignmentDirectional.centerStart：垂直居中水平靠左对齐
                //AlignmentDirectional.center：垂直和水平居中都对齐
                //AlignmentDirectional.centerEnd：垂直居中水平靠右对齐
                //AlignmentDirectional.bottomStart：垂直靠底部水平靠左对齐
                //AlignmentDirectional.bottomCenter：垂直靠底部水平居中对齐
                //AlignmentDirectional.bottomEnd：垂直靠底部水平靠右对齐
                //AlignmentDirectional(.5,.5) 也可以指定具体偏移量，以整个组件的中心为坐标原点，X,Y偏移量取值范围[-1,1]
                alignment: AlignmentDirectional.center,
                //文字书写方向
                // textDirection: TextDirection.rtl,
                //如何确定没有使用 Position 包裹的子组件的大小，可选值有：
                //StackFit.loose：子组件宽松取值，可以从min到max
                //StackFit.expand：子组件取最大值
                //StackFit.passthrough：不改变子组件的约束条件
                // fit: StackFit.expand,
                //超出部分的处理方式
                // overflow: Overflow.clip,
                children: [
                  Container(
                    color: Colors.green,
                    width: 100.0,
                    height: 50.0,
                  ),
                  Text(
                    'Stack层叠组件',
                    style: TextStyle(
                        letterSpacing: 5.0,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                  //相对定位
                  Positioned(
                    left: 10.0,
                    bottom: 30.0,
                    child: Text('Positoned'),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}