第四百二十二回 OverlayEntry组件简介_flutter overlayentry

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

1. 概念介绍

我们在本章回中介绍的OverlayEntry组件是官方提供的组件，它主要用来显示一个模糊层(Overlay)，这个模糊层与我们在前面章回中介绍的首次引导功能中的模糊层完全一样，其实我们在前面介绍的三方包在实现首次引导功能时也使用该组件，我们将在本章回中介绍OverlayEntry组件的用法。

2. 属性与方法

在包中OverlayEntry是独立的组件，它提供了相关的属性和方法来控制自己，我们将在接下来的小节中分别介绍这些属性和方法。

2.1 常用属性

我们先介绍一下OverlayEntry组件的属性，通过属性可以控制组件的相关风格与功能，下面是该组件中常用的属性：

• builder属性：主要用来控制模糊层上显示的内容，它是方法类型，需要返回一个Widget;
• opaque属性：主要用来控制是否模糊显示，它是bool类型，通常将它设置为false，这也是该属性的默认值；

上面介绍的两个属性中builder属性是必选属性，我们必须给该属性赋值，否则无法使用该组件。还需要注意的是该属性会把赋值给它的组件放到一个类似Stack的容器中，因此，我们通常使用Positioned组件给它赋值，这些便于调整组件在模糊层上的位置。

2.2 常用方法

在使用OverlayEntry时需要借助OverlayState，通过OverlayState类的insert()方法来显示Overlay，显示完成后通过OverlayEntry的remove()方法移除当前正在显示的Overlay.我们将在后面的小节中通过示例代码来演示：

3. 示例代码

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!);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上面的示例代码主要演示了如何创建一个OverlayEntry,并且通过OverlayState类的inster方法来显示模糊层(Overlay).

代码中的Overlay是一个覆盖整个屏幕的模糊层，我们可以调整它的大小。实际项目中通常会把它调整成一个可以显示文本内容的矩形框，文本内容就是对某个功能的解释。

4. 内容总结

最后，我们对本章回中内容做一个全面的总结：

• OverlayEntry组件主要用来显示模糊层；
• OverlayEntry组件通过builde属性控制模糊层上面显示的内容；
• OverlayEntry组件借助OverlayState类的inster方法显示模糊层；
• OverlayEntry组件提供了remove方法，通过该方法移除当前的模糊层；

看官们，与"OverlayEntry组件简介"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!