第四百六十七回

文章目录

  • [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组件的用法"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
相关推荐
烛阴27 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
FreeBuf_35 分钟前
微软365 PDF导出功能存在本地文件包含漏洞,可泄露敏感服务器数据
服务器·microsoft·pdf
千鼎数字孪生-可视化41 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月41 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
lixzest1 小时前
C++ Lambda 表达式详解
服务器·开发语言·c++·算法
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
o不ok!1 小时前
Linux面试问题-软件测试
linux·运维·服务器
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程