flutter的overlay组件示例1

这段代码演示了如何在Flutter中使用Overlay来显示自定义的弹出菜单，并处理用户的交互。通过有状态部件来管理Overlay的显示状态和用户的选择。

import 'package:flutter/material.dart';

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

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

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

class _OverlayExampleState extends State<OverlayExample> {
  OverlayEntry? _overlayEntry;
  String _displayText = ''; // 用于存储要显示的文字

  void _showOverlay(BuildContext context) {
    // 创建 OverlayEntry
    _overlayEntry = _createOverlayEntry(context);
    Overlay.of(context)?.insert(_overlayEntry!);
  }

  void _hideOverlay() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  OverlayEntry _createOverlayEntry(BuildContext context) {
    return OverlayEntry(
      builder: (context) => Positioned(
        top: 100, // 您可以根据需要调整位置
        left: MediaQuery.of(context).size.width / 2 - 60, // 居中的定位
        child: Material(
          elevation: 4.0, // 阴影效果
          child: Container(
            width: 120,
            height: 200,
            color: Colors.white,
            child: Column(
              children: [
                ListTile(
                  title: Text('选项 1'),
                  onTap: () {
                    _hideOverlay();
                    setState(() {
                      _displayText = '弹出菜单：选项 1'; // 设置要显示的文字
                    });
                    // 处理选项 1 的点击事件
                  },
                ),
                ListTile(
                  title: Text('选项 2'),
                  onTap: () {
                    _hideOverlay();
                    setState(() {
                      _displayText = '弹出菜单：选项 2'; // 设置要显示的文字
                    });
                    // 处理选项 2 的点击事件
                  },
                ),
                ListTile(
                  title: Text('关闭'),
                  onTap: () {
                    _hideOverlay();
                    setState(() {
                      _displayText = ''; // 关闭时清空显示文字
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                if (_overlayEntry == null) {
                  _showOverlay(context);
                } else {
                  _hideOverlay();
                }
              },
              child: Text('显示弹出菜单'),
            ),
            SizedBox(height: 20),
            Text(
              _displayText, // 显示相应文字
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体功能概述
这段 Flutter 代码实现了一个弹出式菜单的功能，通过点击按钮来显示一个带有选项的弹出菜单，用户选择不同选项或关闭菜单后，会在界面上显示相应的文字信息。

二、主要部分分析

MyApp类
作为应用程序的入口点，创建了一个MaterialApp，并将主页面设置为实现弹出菜单功能的相关页面，同时给应用设置了标题 “Overlay 示例”。

OverlayExample类
这是一个StatefulWidget，用于管理与弹出菜单相关的状态并构建界面。通过createState方法创建了一个具体处理状态和界面构建逻辑的实例。

_OverlayExampleState类
（1）状态变量
定义了两个重要的状态变量：
一个用于存储创建的弹出菜单内容相关对象，初始化为null，表示菜单未显示。
另一个用于存储要在界面下方显示的文字信息，初始化为空字符串，会根据用户在弹出菜单中的操作进行相应更新。

（2）显示弹出菜单的方法
当调用显示弹出菜单的方法时，首先会创建一个代表弹出菜单具体内容和样式的对象，然后将其插入到Overlay层中，使其在屏幕上显示出来。

（3）隐藏弹出菜单的方法
该方法用于隐藏弹出菜单，通过移除之前创建并插入到Overlay层的相关对象，并将存储该对象的变量重新设置为null，表示菜单已隐藏。

（4）创建弹出菜单内容的方法
此方法创建了一个代表弹出菜单具体内容和样式的对象。这个对象包含了确定弹出菜单在屏幕上位置的设置，使其大致居中显示。同时，给弹出菜单添加了阴影效果以使其有立体感，内部通过列布局排列了三个选项，分别是 “选项 1”、“选项 2” 和 “关闭”。每个选项都设置了点击回调函数，当用户点击时，会先隐藏弹出菜单，然后更新用于显示文字信息的状态变量的值，以显示相应的文字信息。

（5）构建主界面的方法
构建了一个带有AppBar的Scaffold作为主界面框架，AppBar设置了标题。在Scaffold的body部分，通过垂直排列的方式放置了一个用于触发弹出菜单显示 / 隐藏的按钮和一个用于显示相应文字信息的文本组件。按钮的点击回调函数根据弹出菜单相关对象的状态来决定是显示还是隐藏弹出菜单，文本组件则根据用户在弹出菜单中的操作所更新的状态变量的值来显示相应文字信息。

三、总结
这段代码利用Overlay机制实现了一个简单的弹出式菜单功能，展示了在 Flutter 中创建和管理覆盖层内容的方式，以及通过状态管理来响应用户操作并更新界面显示的方法。这种弹出式菜单在提供额外操作选项、快捷菜单等应用场景中较为常用。