Stack

• Stack：叠加布局Z -- 外
  • 子Widget按照主轴方向（从里-->外）重叠排列
  • 一般结合Positioned来使用

Positioned 位置Widget

Positioned大小是根据父Widget走的

const Positioned({
    Key? key,
    this.left,//左边距离父Widget左边距离
    this.top,,//顶部距离父Widget顶部距离
    this.right,//右边距离父Widget右边距离
    this.bottom,//底部距离父Widget底部距离
    this.width,//宽度
    this.height,//高度
    required Widget child,
  })

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      alignment: const Alignment(0, -1),
      child: Stack(
        children: [
          Positioned(
            child: Container(
              color: Colors.white,
              width: 200,
              height: 200,
              child: const Icon(Icons.add),
            ),
          ),
          Positioned(
            child: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              child: const Icon(Icons.search_off),
            ),
            left: 0,
          ),
          Positioned(
            child: Container(
              color: Colors.blue,
              width: 50,
              height: 50,
              child: const Icon(Icons.search),
            ),
            right: 0,
            // right: 20,
          ),
        ],
      ),
    );
  }
}

image.png

AspectRatio

宽高比组件，影响父Widget，只需要设置父Widget的Width或者Height值，如果两个都设置就会导致aspectRatio失效

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.yellow,
      width: 300,
      height: 300,
      alignment: const Alignment(0, 0),
      child: Container(
        //属性：child
        color: Colors.blue,
        height: 150,
        child: const AspectRatio(
          aspectRatio: 1 / 1,
        ),
      ),
    );
  }
}