如何防止Overlay覆盖AppBar？答案

【问题标题】：How to prevent Overlay from covering AppBar?如何防止Overlay覆盖AppBar？
【发布时间】：2021-07-01 19:58:15
【问题描述】：

我有一个位于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')
    );
  }
}

【问题讨论】：

用 SafeArea() 包裹脚手架
@Why_So_Ezz 我认为这不会有帮助。

标签： flutter flutter-layout flutter-appbar flutter-positioned

【解决方案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,
              ),
            )
        );
      }
  );

【讨论】：

我认为我没有使用正确的措辞来表达我正在寻找的内容。我的意思是OverlayEntry 应该被AppBar覆盖。因此，如果这是一个合适的术语，它应该具有较低的 z-index。

【解决方案2】：

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

【讨论】：