首页 > 其他分享 >OverlayToolTip组件

OverlayToolTip组件

时间:2024-05-24 23:29:44浏览次数:22  
标签:包中 功能 OverlayTooltip OverlayToolTip 组件 页面 用来

文章目录


我们在上一章回中介绍了"如何在页面上显示蒙板层"相关的内容,本章回中将介绍overlay_tooltip这个三方包.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中介绍的overlay_tooltip包是一个三方包,它是尼日利亚的一个开发者开发的,主要用来实现首次使用App时的功能引导。这个功能引导就是在某
个功能上显示功能的介绍(包中叫OverlayTooltip),同时把功能区域高亮显示,其它区域(包中叫 Overlay)模糊显示,然后点击下一步时继续以相同的方式介绍
其它功能区域。我估计大家都用过该功能,通常在首次安装和使用App时会出现。本章回中将介绍如何使用overlay_tooltip包实现此功能。

2. 思路与方法

2.1 实现思路

包中提供了OverlayTooltip和OverlayTooltipScaffold两个组件,前者用来解释页面中某个功能的用法,后者用来管理页面中的OverlayTooltip。整体的实现
思路就是在页面中某个功能所在的位置插入一个OverlayTooltip,用来解释该功能的使用方法。因为我们会介绍多个功能的使用方法,所以在整个页面上使用包中的组
件(OverlayTooltipScaffold)来管理所有的OverlayTooltip。

2.2 使用方法

在上一小节中我们提到了包中的OverlayTooltip和OverlayTooltipScaffold这两个组件,接下来我们介绍一下它们的用法。
OverlayTooltip是组件的泛称,它对应包中的OverlayTooltipItem组件,该组件提供了相关的属性来控制自己,详细如下:

  • displayIndex属性:用来控制该组件的顺序,表示所有功能中的第n个功能;
  • tooltipVerticalPosition属性:用来控制组件的位置,比如位于功能的下方;
  • tooltip属性:用来显示功能的用法,它类似常用的Builder组件;
  • child属性:这个主要用来存放页面中的功能;
    总之,OverlayTooltip组件类似容器类组件,它会把页面中的某个功能当作容器中的内容,它会在内容上下左右四个方向上显示一个组件,这个组件可以自定义,它主
    要用来解释容器中功能的使用方法。
    OverlayTooltipScaffold组件,主要用来管理OverlayTooltipItem,该组件提供了相关的属性来控制自己,详细如下:
  • startWhen属性:用来启动功能演示,它是方法类型;
  • overlayColor属性:用来控制模糊显示时的颜色;
  • tooltipAnimationDuration属性:从当前toolTip跳转到下一个ToolTip的时间;
  • preferredOverlay属性:用来控制模糊层(Overlay),它是Widget类型;

用来响应点击事件,可以在点击事件中切换不同的ToolTip;

  • builder属性:主要用来存放页面组件,它的用法和Builde组件中同名属性用法相同;
    总之,OverlayTooltipScaffold组件类似容器类组件,它会把整个页面当作容器中的内容,这点从它的名字中也可以看出来,它主要用来管理页面中所有的
    OverlayTooltip,比如切换OverlayTooltip。

3. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • overlay_tooltip这个包主要用来实现首次使用引导功能;
  • 包中提供了OverlayTooltip组件用来对某个功能进行介绍;
  • 包中提供了OverlayTooltipScaffold组件用来管理包中所有的toolTip;
    看官们,与"overlay_tooltip简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

标签:包中,功能,OverlayTooltip,OverlayToolTip,组件,页面,用来
From: https://blog.csdn.net/talk_8/article/details/139186174

相关文章

  • Vue 3 组件基础与模板语法详解
    title:Vue3组件基础与模板语法详解date:2024/5/2416:31:13updated:2024/5/2416:31:13categories:前端开发tags:Vue3特性CompositionAPITeleportSuspenseVue3安装组件基础模板语法Vue3简介1.Vue3的新特性Vue3引入了许多新的特性,以提高框架的性......
  • 移动端封装map 组件,调起高德地图
    封装的map.vue<template><view><mapid="popMap"ref="maps":longitude="longitude":latitude="latitude"scale="14":markers="markers"@tap="onMapTap&quo......
  • uni-app 使用地区选择 组件
    问题描述: 使用uni-app时发现没有现成可用的地区选择组件,通过插件市场找了两个,大部分都是vue2,不兼容vue3,也不是那么好用,后来找了一个直接兼容vue3的 插件地址将其封装成组件,在需要的地方进行调用   <cityPickerref='cityPickerRef':column="3":default-value="for......
  • React后台管理(八)-- 开发页面前准备---插槽以及函数组件传值
    文章目录前言一、插槽的使用1.父组件结构如下2.子组件接受插槽内容二、父子函数组件传值1.父组件传值给子组件(1)父组件定义属性传值给子组件(2)子组件通过props去接收属性值2.子组件传值父组件(1)父组件接收子组件的值,更新数据(2)子组件通过方法,将值传出给父组件,类似vue的......
  • SwiftUI中的手势(DragGesture拖拽手势及Drag动画组件)
    上一篇文章我们了解了如何使用.gesture修饰符和@GestureState属性包装器,让我们看看另一种常见的手势:DragGesture拖拽手势。下面先看个效果图:这个效果中,我们实现了一个Text文本,并添加了拖拽手势,可以拖动到屏幕的任意位置,松手后停留在目标位置,而非回到原来的起点位置。UI......
  • 微信小程序中页面显示时触发子组件的重新渲染
    使用生命周期函数:在页面的onShow或onLoad生命周期函数中,调用子组件的方法或者改变子组件的数据,从而触发子组件的重新渲染。例如,在页面的js文件中:Page({onShow:function(){//调用子组件的方法this.selectComponent('#childComponentId').refreshDa......
  • 显示更多组件
    文章目录1.概念介绍2.实现方法3.示例代码4.内容总结我们在上一章回中介绍了"关于MediaQuery的优化"相关的内容,本章回中将介绍readMore这个三方包.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在本章回中介绍的readMore是一个三方包,它主要用来折叠和展......
  • 定时器组件设计方案
    层级时间轮实现高性能定时器此篇介绍时间轮,它的时间复杂度是最优的,插入、查找(最小)、删除都是O(1),很恐怖的性能这里示例一个三层时间轮,模拟时钟表盘的运作方式,便于理解且性能不低设计思路:1.根据定时任务的超时时间,按超时时间范围存入不同的链表中,处于同一个链表的任务的超......
  • Flutter笔记:Widgets Easier组件库-使用隐私守卫
    Flutter笔记WidgetsEasier组件库:使用隐私守卫-文章信息-Author:李俊才(jcLee95)VisitmeatCSDN:https://jclee95.blog.csdn.netMyWebSite:http://thispage.tech/Email:[email protected]:https://blog.csdn.net......
  • vue3 设置 表单或者页面 懒加载 (或者组件的异步加载)
    用到的工具库  vueUse和useIntersectionObserver1.UseIntersectionObserver函数参数:observerList:由被观察目标所组成的数组,数组项是由React.createRef构建出来的对象callback:当目标元素被曝光所需要触发的函数,该函数接受一个参数indexList,由被曝光元素在observerList......