第四百六十七回

文章目录

  • [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组件的用法"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
相关推荐
2301_780789664 小时前
UDP和TCP的主要区别是什么
服务器·网络协议·web安全·网络安全·udp
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
一个龙的传说7 小时前
linux 常用命令
linux·服务器·zookeeper
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互