第四百六十七回

文章目录

  • [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组件的用法"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
相关推荐
前端_学习之路43 分钟前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
古希腊数通小白(ip在学)1 小时前
stp拓扑变化分类
运维·服务器·网络·智能路由器
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css
Muxiyale2 小时前
使用spring发送邮件,部署ECS服务器
java·服务器·spring