第四百六十七回

文章目录

[1. 知识回顾](#1. 知识回顾)
[2. 使用方法](#2. 使用方法)
[3. 示例代码](#3. 示例代码)
[4. 内容总结](#4. 内容总结)

我们在上一章回中介绍了"OverlayEntry组件简介"相关的内容，本章回中将介绍OverlayEntry组件的用法.闲话休提，让我们一起Talk Flutter吧。

1. 知识回顾

我们在上一章回中介绍了OverlayEntry组件提供的属性和方法并且介绍了如何使用该组件实现一个模糊层，本章回中将在此基础上介绍如何通过OverlayEntry来实现

首次功能引导。本章回的内容可以看作是对OverlayEntry组件的综合应用。

2. 使用方法

下面是使用OverlayEntry实现首次功能引导的方法，请大家参考：

创建OverlayEntry组件，并且给它的builder属性赋值；
通过OverlayState的insert方法显示Overlay;
功能解释完成后通过OverlayEntry组件的remove方法移除Overlay;
把OverlayEntry组件和页面中的某个组件关联起来，用来解释该组件在页面中的功能；

3. 示例代码

dart 复制代码

ElevatedButton(
  onPressed: () => _showOverlay(context),
  child: const Text("Show Overlay"),
)


///显示一个全屏的Overlay
void _showOverlay(BuildContext context) {
  double screenWidth = MediaQuery.sizeOf(context).width;
  double screenHeight = MediaQuery.sizeOf(context).height;

  _overlayEntry1 = OverlayEntry(builder: (context) {
    ///Overlay上显示的内容
    return Positioned(
        top: 0,
        left: 0,
        child: Container(
          color: Colors.lightBlueAccent,
          width: screenWidth,
          height: screenHeight,
          child:const Text("This is a Overlay Entry"),
        ),
    );
  },
    ///控制透明度
  opaque: true,
  );

  final OverlayState overlayState = Overlay.of(context);
  overlayState.insert(_overlayEntry1!);

  ///5秒后移除Overlay
  Future.delayed(const Duration(seconds: 5,),() {
    if(_overlayEntry1 != null) {
      _overlayEntry1!.remove();
      _overlayEntry1 = null;
    }
  });
}

上面的示例代码中通过OverlayEntry创建了一个模糊层，模糊层中的只显示了一行文字，用来解释某种功能。我们把显示模糊层的功能绑定到了按钮上，点击按钮时就

可以显示模糊层，这相当于是对按钮这个组件进行功能解释。模糊层显示5秒后将在页面中自动消失，这个是通过OverlayEntry组件的remove方法实现的。我们在这里

就不演示程序的运行结果了，建议大家自己动手去实践。此外，该示例只能对页面中的单个组件进行功能上的解释，不能连续解释多个组件的功能。

4. 内容总结

我们在本章回主要介绍了如何使用OverlayEntry组件来解释页面中其它组件的功能，或者说实现功能引导。简单来讲可以概括为三点：创建模糊层，显示模糊层和移除

模糊层。下面是我们对本章回的内容做一个全面的总结：

使用OverlayEntry组件可以创建一个模糊层；
需要把OverlayEntry组件和页面中的某个组件绑定在一起，这样就可以解释组件的功能和用法；
对页面中某个组件的功能解释完成后，需要移除OverlayEntry；
看官们，与"OverlayEntry组件的用法"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!