Flutter-层叠布局

Widget—Stack

  • Stack（层叠组件，类似css中的z-index）

    • alignment（声明未定位的子组件的对齐方式）
    • textDirection（声明未定位的子组件的排列顺序）
    • 未定位组件也会进行重叠
    • Stack的最小容器大小会包含所有的未定位组件的容器大小。若是stack外层容器没有设置大小，则容器大小为最小容器大小

    image-20220908171102819

    • 若是外层容器有设置大小，则stack大小为外层容器大小（蓝色为外层容器大小，红色为未定位容器大小）

    image-20220908171621720

    • 如果未定位组件不设置容器大小，外层容器也不设置大小，则填充整个屏幕（没有红色是因为这次我设了透明）

    image-20220908170753793

  • Positioned（绝对定位组件）

    • child（声明子组件）
    • left，top，right，bottom
    • width，height

  • NetworkImage（网络图片组件）

    • NetworkImage（‘图片地址’）
    • 在 AndroidManifest.xml 文件中添加<use-permission android:name="android.permission.INTERNET"/>

代码区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Container(
      width: 400,
      height: 400,
      color: Colors.orange,
      child:Container(
        color: Colors.lightBlueAccent,
        child:  Stack(//按顺序进行渲染，先渲染的组件在下面，后渲染的在上面，我指的是垂直屏幕方向。
          alignment: AlignmentDirectional.bottomCenter,//未定位组件的对齐方式，底部居中
          textDirection: TextDirection.rtl,//未定位组件的排列顺序，从右到左，这会决定alignment对齐的起点和终点
          children:   [
            Container(
              color: Colors.red,//红色
              width: 250,
              height: 250,
            ),
            Container(
              color: Colors.yellowAccent,//黄色
              width: 200,
              height: 200,
            ),
            const Positioned(
                top: 40,//距离stack容器顶部40单位处
                left: 60,//距离stack容器左边60单位处
                child: CircleAvatar(//圆形头像，在流式布局中有提及
                  backgroundImage: NetworkImage('https://img1.imgtp.com/2022/09/03/svQ5krdh.jpg'),
                  radius: 50,//圆的半径
                )
            ),
          ],
        ),
      ),
    );
  }
}

效果图