flutter的overlay组件示例6

这段代码是一个Flutter应用程序，它展示了如何使用覆盖层（Overlay）来显示一个类似Toast的消息提示。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overlay Toast Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Overlay Toast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => showToast(context, 'Success message!', Colors.green),
              child: Text('Show Success Toast'),
            ),
            ElevatedButton(
              onPressed: () => showToast(context, 'Warning message!', Colors.orange),
              child: Text('Show Warning Toast'),
            ),
            ElevatedButton(
              onPressed: () => showToast(context, 'Error message!', Colors.red),
              child: Text('Show Error Toast'),
            ),
          ],
        ),
      ),
    );
  }

  void showToast(BuildContext context, String message, Color color) {
    final overlayState = Overlay.of(context);
    final overlayEntry = OverlayEntry(
      builder: (context) {
        return Positioned(
          top: 100.0,
          width: MediaQuery.of(context).size.width,
          child: Material(
            color: Colors.transparent,
            child: Container(
              alignment: Alignment.center,
              width: double.infinity,
              child: Container(
                margin: EdgeInsets.symmetric(horizontal: 20.0),
                padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: BorderRadius.circular(25.0),
                ),
                child: Text(
                  message,
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        );
      },
    );

    overlayState.insert(overlayEntry);
    Future.delayed(Duration(seconds: 2)).then((_) {
      overlayEntry.remove();
    });
  }
}

以下是代码分析内容：

1. 整体功能概述
   此 Flutter 代码构建了一个简单应用，其主要功能是在主屏幕展示三个不同按钮，分别用于触发显示成功、警告、错误这三种不同类型的提示信息（类似 Toast 效果）。点击相应按钮时，会在屏幕上方特定位置弹出对应颜色与消息内容的提示框，且两秒后该提示框自动消失。

2. 代码结构分析
   2.1 入口点 main 函数
   首先导入了 flutter/material.dart 库，它是 Flutter 应用开发构建用户界面所需的核心 UI 库，包含众多 UI 组件、主题相关类等。
   main 函数作为 Flutter 应用的入口点，通过调用 runApp 函数并传入 MyApp 类的实例来启动整个应用程序。

2.2 MyApp 类
MyApp 类继承自 StatelessWidget，属于无状态组件，创建后其外观和行为通常不会改变（除非父组件重新构建它）。
在其 build 方法中，返回 MaterialApp 实例用于配置应用基本属性，如设置标题、指定主题主色调为蓝色，并将应用首页设为 HomeScreen 类的实例。

2.3 HomeScreen 类及其状态类 _HomeScreenState
HomeScreen 类继承自 StatefulWidget，是有状态组件，内部状态在应用运行中可能改变，通过重写 createState 方法创建对应状态类 _HomeScreenState 实例。
在 _HomeScreenState 类中定义了一个 GlobalKey 类型的变量，该全局键可用于后续获取 Scaffold 组件状态（虽当前代码未体现相关操作）。

3. 界面构建与交互逻辑
   3.1 _HomeScreenState 的 build 方法
   构建了包含 Scaffold 组件的用户界面，通过给 Scaffold 组件设置之前定义的全局键，以便后续获取其状态。
   在 Scaffold 的 appBar 部分设置标题。
   Scaffold 的 body 部分通过 Center 组件将子组件居中显示，该子组件是一个 Column，其主轴方向对齐方式为居中。此 Column 中包含三 个 ElevatedButton 组件，各按钮功能如下：
   第一个按钮：点击时调用相关函数并传入上下文、成功消息内容及绿色，按钮显示文本为显示成功提示。
   第二个按钮：点击时调用相关函数并传入上下文、警告消息内容及橙色，按钮显示文本为显示警告提示。
   第三个按钮：点击时调用相关函数并传入上下文、错误消息内容及红色，按钮显示文本为显示错误提示。

3.2 showToast 方法
该方法用于显示类似 Toast 效果的提示信息。首先获取当前上下文的 Overlay 状态。
接着创建 OverlayEntry 实例，通过其 builder 回调函数构建提示信息具体外观：
利用 Positioned 组件将提示信息定位在屏幕上方特定像素位置且设置宽度为当前屏幕宽度。
提示信息主体是 Material 组件，颜色设为透明，内部包含 Container 组件，该组件做了进一步设置：
设置内部子组件居中对齐。
使宽度在水平方向上尽可能占满空间。
内部嵌套的 Container 设置了内边距、背景颜色、圆角半径等。
在嵌套 Container 内部放置 Text 组件用于显示消息内容并设置文本颜色为白色。
然后将创建好的 OverlayEntry 插入到 Overlay 层中以显示提示信息。
最后通过相关操作实现延迟两秒后移除插入的 OverlayEntry，让提示信息自动消失。

总体而言，这段代码利用 Flutter 的 Overlay 机制及相关 UI 组件，实现了简单显示不同类型提示信息（类似 Toast 效果）且能自动消失的功能，展示了 Flutter 在构建简单用户界面和实现动态提示效果方面的应用。不过在实际应用中，可能需对一些细节进行优化，比如提示信息的定位在不同屏幕尺寸下的适配等。