如何使 OverlayEntery 构建器删除自身

Question

我正在尝试使用一些按钮构建一个覆盖条目。我希望覆盖层内的按钮在按下时调用

entry.remove()

，但当然我不能在分配它之前使用 OverlayEntry。有解决这个问题的方法吗？

OverlayState overlayState = Overlay.of(context);
OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
    return Align(
      alignment: alignment,
      child: FittedBox(
        child: Material(
          color: Colors.transparent,
          child: Container(
            width: width,
            height: height,
            decoration: BoxDecoration(
                color: backgroundColor, borderRadius: borderRadius),
            padding: padding,
            margin: EdgeInsets.only(
                left: left, top: top, right: right, bottom: bottom),
            child: IconButton(icon:Icon(Icons.check), onPressed: () {
entry?.remove()}),
          ),
        ),
      ),
    );
  });
  overlayState.insert(overlayEntry);

我尝试只使用 Entry?.remove() 但没有成功。

Answer 1

您可以使用 Late，这是一个它的工作示例。

class F312 extends StatefulWidget {
  const F312({super.key});

  @override
  State<F312> createState() => _F312State();
}

class _F312State extends State<F312> {
  late OverlayState overlayState = Overlay.of(context);
  late OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
    return Align(
      alignment: Alignment.center,
      child: FittedBox(
        child: Material(
          color: Colors.transparent,
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.circular(10)),
            child: TextButton(
              onPressed: () => overlayEntry.remove(),
              child: const Text("Close"),
            ),
          ),
        ),
      ),
    );
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () => overlayState.insert(overlayEntry),
            child: const Text("Show"),
          ),
        ],
      ),
    );
  }
}

Answer 2

我用

Completer

这样做了：

class Attachments {
  final Completer<void> completer = Completer<void>();
  late OverlayEntry entry;

  void showOverlay(BuildContext context, double width, double height) {
    entry = overlay(
        context: context,
        backgroundColor: Colors.grey[850]!,
        borderRadius: BorderRadius.circular(8),
        alignment: Alignment.bottomCenter,
        padding: const EdgeInsets.all(8.0),
        child: Wrap(
          direction: Axis.vertical,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                attachemntElement(
                    const Icon(
                      Icons.abc_outlined,
                      size: 30,
                      color: Colors.white,
                    ), () {
                  completer.complete();
                }),
                attachemntElement(
                    const Icon(
                      Icons.abc_outlined,
                      size: 30,
                      color: Colors.white,
                    ), () {
                  completer.complete();
                }),
                attachemntElement(
                    const Icon(
                      Icons.abc_outlined,
                      size: 30,
                      color: Colors.white,
                    ), () {
                  completer.complete();
                }),
              ],
            ),
          ],
        ));
  }

  Future<void> removeEntry() async {
    await completer.future;
    entry.remove();
  }
}

然后是显示叠加层的按钮：

onPressed: () async {
  Attachments attachments = Attachments();
  attachments.showOverlay(context, width, height);
  await attachments.removeEntry();
},