Flutter学习基础组件之Stack/Positioned

Stack/Positioned是用来做页面布局定位的组件，需要结合使用

Stack

children:一个数组，里面可放多个Widget
alignment:Alignment.topCenter//对齐方式，会对所有的子组件统一设置对齐，不灵活，一般不用

Positioned

child:一个子组件
left,top,right,bottom,width,heigh://设置这些值会改变子组件的大小，位置(相对于最外层组件)

使用方法：

class HomeContent2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(//最外层容器
      color: Colors.yellow,
      width: 400,height: 400,
      child: Stack(
//        alignment: Alignment.topCenter,//不用这个
        children: [
          Positioned(//调整红色的子组件的原点为(0,120),大小不变
            left: 0,
            top: 120,
            child: Container(width: 50,height: 50,color: Colors.red,),
          ),
          Positioned(//调整绿色子组件离Container右侧50，离下方100，大小不变
            right: 50,
            bottom: 100,
            child: Container(width: 50,height: 50,color: Colors.green,),
          ),
          Positioned(//调整蓝色子组件的size为(80,70),原点为(0,0)
            width: 80,
            height: 70,
            child: Container(width: 50,height: 50,color: Colors.blue,),
          ),
          Positioned(//可以同时设置上下左右，但再设置宽高时会报错
            left: 0,
            right: 10,
            top: 350,
            bottom: 10,
//            width: 390,
//            height: 40,
            child: Container(width: 50,height: 50,color: Colors.black,),
          ),
        ],
      ),
    );
  }
}