flutter - 如何防止Overlay覆盖AppBar？

Question

我有一个自定义小部件位于Stack. 此自定义小部件创建一个OverlayEntry指向其位置的链接并将其插入到Overlay.

问题是这个叠加层漂浮在 AppBar 和 FloatingActionButton 之上。

如何将 my 的内容放在OverlayEntry下方AppBar但上方Stack？

UPD：“下方”是指AppBar应该漂浮在OverlayEntry上面（或覆盖它，好像它有更大的 z-index）。

这就是我所拥有的：

这就是我想要的：

示例代码：

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: OverlayDemo(),
    ),
  );
}

class OverlayDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar + Overlay'),
      ),
      body: Stack(
        children: [
          Positioned(
            top: 10,
            left: 100,
            child: WidgetWithOverlay()
          )
        ],
      )
    );
  }
}


class WidgetWithOverlay extends StatefulWidget {
  const WidgetWithOverlay({
    Key? key,
  }) : super(key: key);

  @override
  _WidgetWithOverlayState createState() => _WidgetWithOverlayState();
}

class _WidgetWithOverlayState extends State<WidgetWithOverlay> {
  OverlayEntry? overlayEntry;

  void showOverlay() {
    print(overlayEntry);
    if (overlayEntry == null) {
      overlayEntry = OverlayEntry(
          builder: (BuildContext context) {
            return Positioned(
                top: 0.0,
                left: 0.0,
                child: IgnorePointer(
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
                )
            );
          }
      );
      Overlay.of(context)!.insert(overlayEntry!);
    }
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: showOverlay,
      child: Text('Show Overlay')
    );
  }
}

Answer 1

默认情况下，Appbar高度是kToolbarHeight，因此您可以像这样创建叠加层：

  overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Positioned(
            top: kToolbarHeight,
            left: 0.0,
            child: IgnorePointer(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            )
        );
      }
  );

Answer 2

将 Stack 放在脚手架上方，那么堆栈的第一个子级将是 WidgetWithOverlay() 第二个子脚手架。