flutter 的 overlay组件示例13

这段代码演示了如何在Flutter中使用Overlay小部件来创建自定义的浮动UI元素，并提供了一种方法来动态地添加和移除这些元素。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OverlayExample(),
    );
  }
}

class OverlayExample extends StatefulWidget {
  @override
  _OverlayExampleState createState() => _OverlayExampleState();
}

class _OverlayExampleState extends State<OverlayExample> {
  final List<OverlayEntry> _overlays = [];

  void _showOverlay(BuildContext context) {
    // 声明 overlayEntry 变量
    OverlayEntry? overlayEntry;

    // 确保在使用之前初始化 overlayEntry
    overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Positioned(
          top: 100.0,
          right: 20.0,
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {
                _removeOverlay(overlayEntry!);
              },
              child: Container(
                padding: EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Text(
                  'Click to dismiss',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        );
      },
    );

    // 插入 OverlayEntry 到 Overlay 中
    Overlay.of(context)!.insert(overlayEntry!);
    _overlays.add(overlayEntry!);
  }

  void _removeOverlay(OverlayEntry overlayEntry) {
    overlayEntry.remove();
    _overlays.remove(overlayEntry);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _showOverlay(context);
          },
          child: Text('Show Overlay'),
        ),
      ),
    );
  }
}

以下是对这段代码去除对原代码引用后的分析：
一、整体功能概述
这段 Flutter 代码实现了一个可多次触发显示覆盖层的功能，每次点击页面中的按钮，就会在屏幕右上角显示一个带有 “Click to dismiss” 文字的蓝色圆角容器作为覆盖层，点击该覆盖层可以将其关闭，并且可以重复此操作来创建多个覆盖层实例，每个实例都能独立进行显示与关闭操作。

二、主要部分分析

1. 应用入口及主页面相关
   应用入口：通过MyApp这个StatelessWidget创建MaterialApp并将主页面设置为OverlayExample，以此来展示与覆盖层相关的功能。
   主页面（OverlayExample）：作为一个StatefulWidget，用于管理覆盖层相关的状态并构建界面。它创建了一个带有AppBar和body的Scaffold，AppBar设置了标题 “Overlay Example”，在body部分放置了一个居中的ElevatedButton，点击该按钮会触发显示覆盖层的操作。

2. 覆盖层管理相关
   状态变量：在_OverlayExampleState类中定义了一个List类型的变量_overlays，用于存储所有已创建的覆盖层实例，方便后续对多个覆盖层进行统一管理。
   显示覆盖层方法（_showOverlay）：
   首先声明了一个OverlayEntry?类型的变量overlayEntry，然后对其进行初始化创建。在初始化过程中，创建的OverlayEntry的builder函数返回一个Positioned组件，该组件用于定位覆盖层在屏幕上的位置，使其显示在右上角（top: 100.0，right: 20.0）。
   在Positioned组件内部，有一个Material组件，其color属性设置为Colors.transparent，使其背景透明。内部包裹着一个InkWell组件，用于处理点击事件，点击时会调用_removeOverlay方法并传入当前的overlayEntry实例来关闭该覆盖层。
   InkWell内部是一个Container，设置了内边距、蓝色的背景颜色、圆角边框等样式，并且在其中显示白色文字 “Click to dismiss”。
   创建好overlayEntry后，先将其插入到Overlay中使其显示出来，然后将该overlayEntry添加到_overlays列表中，便于后续统一管理多个覆盖层实例。
   移除覆盖层方法（_removeOverlay）：该方法接收一个OverlayEntry实例作为参数，先调用该实例的remove方法将其从Overlay层移除，使其不再显示，然后从_overlays列表中移除对应的实例，完成对该覆盖层的彻底清理。

三、总结
这段代码利用Overlay机制实现了可创建和管理多个覆盖层的功能，用户通过按钮点击能方便地添加覆盖层，并且每个覆盖层都具备可交互（点击关闭）的特性，适用于一些需要在屏幕上同时展示多个临时提示、操作入口等类似的应用场景，丰富了应用的交互方式和功能展示效果。