一统天下 flutter - widget 布局类（可以有多个子）: Stack - 层叠布局

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 布局类（可以有多个子）: Stack - 层叠布局

示例如下:

lib\widget\layout\stack.dart

/*
 * Stack - 层叠布局
 *   Positioned - 层叠布局内的绝对定位
 */

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.red,
        child: Stack(
          /// alignment - 非 Positioned 的子元素的对齐方式
          ///   topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
          alignment: Alignment.bottomRight,
          /// fit - 非 Positioned 的子元素的约束方式
          ///   loose - 使用子元素的原始大小
          ///   expand - 把子元素拉伸到与 Stack 大小一致
          ///   passthrough - 强制子元素使用 Stack 的父级约束
          fit: StackFit.loose,
          /// clipBehavior - 超出范围的子元素的剪裁方式
          ///   none - 不剪裁
          ///   hardEdge - 裁剪但不抗锯齿，速度比 none 慢
          ///   antiAlias - 裁剪而且抗锯齿，速度比 hardEdge 慢
          ///   antiAliasWithSaveLayer - 裁剪而且抗锯齿，并分配一个缓冲区，速度比 antiAlias 慢
          clipBehavior: Clip.none,
          children: [
            /// 在 Stack 的 children 中定义的多个元素会从内到外层叠布局
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 30,
              height: 30,
              color: Colors.orange,
            ),

            /// Positioned - 用于在 Stack 内绝对定位
            ///   left, top, right, bottom, width, height
            Positioned(
              left: 10,
              top: 10,
              width: 200,
              height: 200,
              child: Container(color: Colors.green,),
            ),
          ],
        ),
      ),
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd