如何防止Overlay覆盖AppBar？

如何解决如何防止Overlay覆盖AppBar？

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

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

如何将 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')
    );
  }
}

解决方法

默认情况下，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,),)
        );
      }
  );

,

将 Stack 放在脚手架上方，然后堆栈的第一个子项将是 WidgetWithOverlay() 第二个子脚手架。