Flutter基础-012-Stack绝对布局

Stack与Positioned配合使用，可以用于从left top bottom right等方面指定子widget的位置，类似于Android中的FrameLayout，绝对布局。

Stack属性

Stack属性设定了children中的widget默认遵守的规范，如果在Positioned中没有指定水平或垂直方向的位置，那么使用Stack中规定的。

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,根据textDiretion确定具体的排序
    this.textDirection,// 子widget的排列方向，是ltr 还是rtl 
    this.fit = StackFit.loose,// 没有使用Positioned时，子widget大小，loose表示使用widget自身大小，expand表示扩展到stack大小
    this.overflow = Overflow.clip,// 超出屏幕部分的处理方式
    List<Widget> children = const <Widget>[],
  }) 

Positioned

水平方向，使用left width right控制宽度和位置，但三个属性中最多设置两个。 垂直方向，使用top height bottom控制高度和位置，但三个属性中最多设置两个，另一个推算得出。

const Positioned({
    Key key,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    @required Widget child,
  }) 

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ConstrainedBox(
          constraints: BoxConstraints.expand(),
        child:
        Stack(
          alignment: AlignmentDirectional.centerStart,//如果Positioned没有指定水平和垂直的位置，那么Positioned的widget使用此属性
//          alignment: AlignmentDirectional.topStart,
//          alignment: AlignmentDirectional.topCenter,
//          alignment: AlignmentDirectional.topEnd,
//          alignment: AlignmentDirectional.center,
//          alignment: AlignmentDirectional.centerEnd,
//          alignment: AlignmentDirectional.bottomStart,
//          alignment: AlignmentDirectional.bottomCenter,
//          alignment: AlignmentDirectional.bottomEnd,
          textDirection: TextDirection.rtl,
//          fit: StackFit.loose,//
          fit: StackFit.expand,//
//          overflow: Overflow.clip,// 子widget 超出屏幕部分，clip不显示
          overflow: Overflow.visible,// 子widget 超出屏幕部分，visible实际效果也是不显示
          children: <Widget>[
            //没有Positioned，因此使用父类的fit属性
            Container(
              child: Text("444",style: TextStyle(backgroundColor: Colors.orange),),
              color: Colors.grey,
            ),
            Positioned(
              child: Text("777",style: TextStyle(backgroundColor: Colors.orange),),
              left: 39,
            ),
            Positioned(
              left: 10,
              top: 10,
              child: Text("1111"),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Text("222"),
            ),
            Positioned(
              left: 10,
              width: 100,
              child: Text("333",style: TextStyle(backgroundColor: Colors.green),),
            ),

            Positioned(
              right: -20,
              child: Text("超出了屏幕1234567890abcde",style: TextStyle(backgroundColor: Colors.red),),
            ),
          ],
        ),
      ),
    );
  }
}