7. Stack布局

1. Stack布局

Flutter中的Stack布局方式，类似于Android开发中的FrameLayout布局，是一层覆盖一层

class MyStackWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: const FractionalOffset(0.5,0.8),
      children: [
        const CircleAvatar(
          backgroundImage: NetworkImage("https://img.pconline.com.cn/images/upload/upc/tx/pc_best/2111/04/c9/282845840_1636028316063.jpg"),
          radius: 100.0,
        ),
        Container(
          child: const Text("JSPang，技术胖"),
          color: Colors.yellow,
          padding: const EdgeInsets.all(10.0),
        )
      ],
    );
  }

}

2. Stack中的Positioned组件应用

当Stack布局中，存在多个child的时候，上面的alignment就会失效，这个时候，我们可以使用Positioned组件

class MyPositionedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: const [
        CircleAvatar(
          backgroundImage: NetworkImage(
              "https://img.pconline.com.cn/images/upload/upc/tx/pc_best/2111/04/c9/282845840_1636028316063.jpg"),
          radius: 100.0,
        ),
        Positioned(
            left: 50,
            top: 50,
            child: Text(
              "技术胖",
              style: TextStyle(
                backgroundColor: Colors.yellow,
              ),
            )),
        Positioned(
            bottom: 50,
            right: 50,
            child: Text(
              "武器大师",
              style: TextStyle(
                backgroundColor: Colors.yellow,
              ),
            )),
      ],
    );
  }
}