Flutter--层叠布局

1.Stack组件

Stack组件表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合Positioned来实现页面的定位布局。

alignment:配置所有子元素的显示位置

children:子组件

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: 400,
          height: 300,
          color: Colors.red,
        ),
        Container(
          width: 200,
          height: 200,
          color: Colors.yellow,
        ),
        const Text('Hello world'),
      ],
    );
  }
}

后面的子组件会叠在前面的子组件上，使用了alignment使所有的组件居中显示。

2.Stack Positioned

Stack组件结合Positioned组件也可以控制每个子元素的显示位置。

1. top:元素距离顶部的距离

2. bottom:子元素距离底部的距离

3. left:子元素距离左侧距离

4. right:子元素距离右侧距离

5. child:子组件

6. width:组件的高度（宽度和高度必须是固定值，没法使用double.infinity）

7. height:子组件的高度

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 300,
      color: Colors.red,
      child: Stack( //相对于外层容器去定位，如果没有外层容器，则是相对整个屏幕
        children: [
          Positioned(
            top: 100,
            left: 50,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
          ),

          Positioned(
            top: 50,
            right: 50,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
          const Text('Hello world')
        ],
      ),
    );
  }
}

3.Align组件

Align组件可以调整子组件的位置，Stack组件中结合Align组件可以控制每个子元素的显示位置。

(1)Align的简单使用

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      child: const Align(
        alignment: Alignment.center,
        child: Text('Hello world'),
      ),
    );
  }
}

(2) Alignment(x,y)定方位

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      child: const Align(
        alignment: Alignment(0,0),
        child: Text('Hello world'),
      ),
    );
  }
}

这样设置，也能使Text定位在中间。这其中会涉及到一个换算。

(3)使用Align实现居左居右定位的效果

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 40,
      color: Colors.red,
      child: Stack(
        children: const [
          Align(alignment: Alignment.centerLeft,child: Text('哈哈哈'),),
          Align(alignment: Alignment.centerRight,child: Text('嘿嘿嘿'),),
        ],
      ),
    );
  }
}