Flutter 组件使用：使用 Stack 替代 GlobalKey 的定位 tip-widget 实现

场景

有时候需要在指定位置进行 tip-widget 的弹出与展示，常见的方式是通过给指定位置上的指定 widget 添加 GlobalKey 来实现；

但是，使用这种方式的话，【一】大多数时候都需要进行全局定位转换（localToGlobal）及计算，【二】使用系统 Popup 控件，当 Popup 展示时，列表可能不可滑动，【三】如果需要跟随列表滑动，就需要使用实时监听滑动回调的方式去实时更新 tip-widget 的实时跟随滑动；

以上提到的问题，不仅实现上“费时费力”，还会使相关功能代码分散、不相关功能代码耦合，造成代码维护及迭代上的难度；

所以，在此提出一种“使用 Stack 替代 GlobalKey 的定位 tip-widget 实现”，通过一种“讨巧”的方式，尝试较好地解决以上提到的问题；

当然，解决方法还有很多，骚操作是程序员的乐趣，但是更好地解决问题才是程序员的追求 ~！

效果

说明

这种方案，是通过使用 Stack 将指定 widget 与 tip-widget 进行绑定，主要有两种场景：
1、如果指定 widget 本身的父 widget 就是 Stack 的话，直接把 tip-widget 加入 Stack 进行定位维护就行
2、如果指定 widget 本身的父 widget 不是 Stack 的话，就使用一个 Stack 包裹住指定 widget，然后保证 Stack 的宽高为指定 widget 的宽高，同时设置 Stack 的 clipBehavior 为 Clip.none，最后把 tip-widget 加入 Stack 进行定位维护

如果指定 widget 本身的父 widget 不是 Stack 的话，需要注意以下限定条件：
并不是所有场景都适合使用这种方案进行适配，需要根据指定 widget 的父 widget 的布局特点进行选用

比如 Column 控件，Column 控件对于子 widget 的绘制顺序是由上向下（逻辑在 RenderFlex 的 performLayout() 和 paint(PaintingContext context, Offset offset) 中）；
正常情况下，Column 子 widget 间是根据其本身在 Column 中的偏移量紧密衔接的；
但是，如果使用 Stack 的 Clip.none 特性后，Stack 包裹的内容可超范围绘制显示，这时，体现在 Column 的绘制顺序的话，顺序靠后的子 widget 就会覆盖顺序靠前的子 widget 的超范围绘制的内容；
所以，在 Column 中如果 tip-widget 是向上展示的，一般能正常展示，但是，如果 tip-widget 是向下展示的，就会有覆盖的问题。

范例

class _TestPageState extends State<TestPage> {
  bool show = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stack妙用')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              width: double.maxFinite,
              height: 150,
              color: Colors.red.withOpacity(0.5),
            ),
            Container(
              width: double.maxFinite,
              height: 150,
              color: Colors.orange.withOpacity(0.5),
            ),
            Container(
              alignment: Alignment.center,
              width: double.maxFinite,
              height: 150,
              color: Colors.yellow.withOpacity(0.5),
              child: Container(
                color: show ? Colors.red : null,
                child: Stack(
                  clipBehavior: Clip.none,
                  children: [
                    GestureDetector(
                      child: const Icon(Icons.add_circle, size: 50),
                      onTap: () {
                        setState(() {
                          show = !show;
                        });
                      },
                    ),
                    if (show)
                      Positioned(
                        top: -90,
                        left: 30,
                        child: Container(
                          alignment: Alignment.center,
                          color: Colors.red.withOpacity(0.8),
                          width: 50,
                          height: 80,
                          child: const Text('菜单'),
                        ),
                      ),
                    if (show)
                      Positioned(
                        top: 60,
                        left: 30,
                        child: Container(
                          alignment: Alignment.center,
                          color: Colors.red.withOpacity(0.8),
                          width: 50,
                          height: 80,
                          child: const Text('菜单'),
                        ),
                      ),
                  ],
                ),
              ),
            ),
            Container(
              width: double.maxFinite,
              height: 150,
              color: Colors.green.withOpacity(0.5),
            ),
            Container(
              width: double.maxFinite,
              height: 150,
              color: Colors.blue.withOpacity(0.5),
            ),
            Container(
              width: double.maxFinite,
              height: 150,
              color: Colors.indigo.withOpacity(0.5),
            ),
            Container(
              width: double.maxFinite,
              height: 150,
              color: Colors.purple.withOpacity(0.5),
            ),
          ],
        ),
      ),
    );
  }
}