Flutter 页面布局 Stack、Positioned层叠布局 实现页面定位布局

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,//子组件的对齐方式
    this.textDirection,//排序方式
    this.fit = StackFit.loose,//如何确定没有使用 Position 包裹的子组件的大小
    this.overflow = Overflow.clip,//超出部分的处理方式
    this.clipBehavior = Clip.hardEdge,
    List children = const [],//子组件
  }) : assert(clipBehavior != null),
       super(key: key, children: children);

Stack(
      alignment: AlignmentDirectional(-0.5,0.5),
        fit: StackFit.loose,
        textDirection: TextDirection.rtl,
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
          Text(
            "我是文本"
          ),
          Text(
              "222222222"
          ),
        ],
    );

return Container(
      height: 400,
      width: 400,
      color: Colors.red,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Icon(Icons.account_circle,size: 40,color: Colors.white,)
          ),
          Align(
              alignment: Alignment.topLeft,
            child: Icon(Icons.cached_outlined,size: 40,color: Colors.white,)
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Icon(Icons.baby_changing_station,size: 40,color: Colors.white,)
          )
        ],
      ),
    );

return Container(
      height: 400,
      width: 400,
      color: Colors.red,
      child: Stack(
        children: [
          Positioned(
            left: 10,
            top: 10,
            width: 60,
            height: 60,
            child: Container(
              color: Colors.black,
            ),
          ),

          Positioned(
            right: 10,
            top: 10,
            width: 60,
            height: 60,
            child: Container(
              color: Colors.blue,
            ),
          ),
          Positioned(
            left: 10,
            bottom: 10,
            width: 40,
            height: 40,
            child: Container(
              color: Colors.yellow,
            ),
          ),
          Positioned(
            bottom: 10,
            right: 10,
            width: 40,
            height: 40,
            child: Container(
              color: Colors.deepPurple,
            ),
          )
        ],
      ),
    );