【Flutter -- 布局】层叠布局（Stack和Positioned）

Flutter 中使用 Stack 和 Positioned 这两个组件来配合实现绝对定位。Stack 允许子组件堆叠，而 Positioned 用于根据 Stack 的四个角来确定子组件的位置。

Stack

1. 简介

Stack 可以类比 web 中的 absolute，绝对布局。绝对布局一般在移动端开发中用的较少，但是在某些场景下，还是有其作用。当然，能用 Stack 绝对布局完成的，用其他控件组合也都能实现。

2. 属性

alignment：对齐方式，默认是左上角（topStart）。

textDirection：文本的方向，绝大部分不需要处理。

fit：定义如何设置non-positioned节点尺寸，默认为loose。

其中StackFit有如下几种：

• loose：子节点宽松的取值，可以从min到max的尺寸；
• expand：子节点尽可能的占用空间，取max尺寸；
• passthrough：不改变子节点的约束条件。

overflow：超过的部分是否裁剪掉（clipped）。

3. 实例

1. 效果图

3. 代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('层叠布局'),
            ),
            body: Center(
              child: Stack(
                alignment: const Alignment(0.6, 0.6),
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: AssetImage('images/avatar.png'),
                    radius: 100.0,
                  ),

                  Container(
                    decoration: BoxDecoration(
                      color: Colors.black45
                    ),
                    child: Text(
                      'KevinDev',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  )
                ],
              ),
            )
        )
    );
  }
}

Positioned

1. 简介

绝对定位，用于确定子组件的位置

2. 属性

left、top、right、bottom：他们分别代表离 Stack 左、上、右、下四边的距离。

width、height：指定需要定位元素的宽度和高度。

注：Positioned的width、height和其它地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位组件，

3. 实例

1. 效果图

2. 代码

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text('层叠布局'),
            ),
            body: ConstrainedBox(
              constraints: BoxConstraints.expand(),
              child: Stack(
                alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
                children: <Widget>[
                  Container(
                    child: Text("Hello world",style: TextStyle(color: Colors.white)),
                    color: Colors.blue,
                  ),
                  Positioned(
                    left: 18.0,
                    child: Text("I am Kevin"),
                  ),
                  Positioned(
                    top: 18.0,
                    child: Text("Your friend"),
                  )
                ],
              ),
            )
        )
    );
  }
}