第四百四十七回

文章目录

  • 1. 概念介绍
  • 2. 思路与方法
    • 2.1 实现思路
    • 2.2 使用方法
  • 3. 内容总结

我们在上一章回中介绍了"如何在页面上显示蒙板层"相关的内容,本章回中将介绍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简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/801199.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AGI(通用人工智能Artificial General Intelligence)知识点

通用人工智能AGI知识点 AGI1. prompt提示工程是什么?2. 怎么构建prompt?3. Function Calling是什么?4. RAG是什么?构建 RAG 模型的步骤:RAG 的优势和应用场景: 5. 离线和在线的RAG怎么构建?5. 构…

【SCI绘图】【热力图系列2 R】多特征相关性分析热力图指定聚类 R

SCI,CCF,EI及核心期刊绘图宝典,爆款持续更新,助力科研! 本期分享: 【SCI绘图】【热力图系列2 R】多特征相关性分析热力图指定聚类 R 1.环境准备 library(gplots) library(RColorBrewer)2.数据读取 ###…

VUE实现增删改查功能

Vue 中实现增删改查功能 增删改查(CRUD)是 Web 应用程序中的基本操作,它可以让我们在数据库中创建、读取、更新和删除数据。在 Vue.js 中实现 CRUD 功能相对简单。 创建 创建新记录时,我们将使用 v-model 双向绑定数据并向服务…

python小项目——时钟模拟

钟表是一种计时的装置,也是计量和指示时间的精密仪器。钟表的样式千变万化,但是用来显示时间的表盘相差无几,大多数钟表表盘的样式由刻度(共60个,围成圆形)、指针(时针、分针和秒针)…

SpringBoot中这样用ObjectMapper,才够优雅!

目录 背景步骤在SpringBoot项目中要实现对象与Json字符串的互转,每次都需要像如下一样new 一个ObjectMapper对象:这样的代码到处可见,有问题吗?我们要使用jmh测试几种方式的区别:所以在我们真正使用的时候不要在方法中…

JavaScript 书写位置

JS 分为三种使用方法,分别为行内,内嵌,外部。 行内式(不推荐使用) 行内就是 将 JS 代码直接写在 HTML 标签上 ,这种方式的结构、行为分离不够彻底,不利于后 期维护,复用性不强…

2024年3月30日~2024年4月7日周报

文章目录 一、前言二、创意收集2.1 多任务学习2.1.1 多任务学习的定义与优势2.1.2 多任务学习的分类 2.2 边缘检测2.2.1 基础理论2.2.2 sobel代码介绍2.2.3 canny代码介绍 三、《地震速度模型超分辨率的多任务学习》3.1 M-RUDSR架构3.2 详细介绍3.3 实验设置 四、实验五、小结5…

揭秘程序员面试技巧,助你轻松拿offer!

上文 程序员面试是求职者展现自身技术实力、沟通能力和职业素养的关键环节。为了在面试中脱颖而出,求职者需要掌握一些实用的面试技巧。以下将详细阐述程序员面试技巧,助您在面试中取得更好的成绩。 一、面试前准备 了解公司及职位 在面试前&#xff0…

操作系统与编程系列专栏(一):导言

在一间充满了键盘敲击声和低语讨论的办公室内,两位资深程序员,老马和老王,围绕着一个永恒的话题展开了讨论。他们的对话不仅引发了思考,也为那些在软件开发道路上前行的人提供了不少启示。 老马:“我觉得深入了解操作系…

【leetcode面试经典150题】18.整数转罗马数字(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主,题解使用C语言。(若有使用其他语言的同学也可了解题解思路,本质上语法内容一致&…

【LeetCode题解】2009. 使数组连续的最少操作数

文章目录 [2009. 使数组连续的最少操作数](https://leetcode.cn/problems/minimum-number-of-operations-to-make-array-continuous/)思路:一、排序去重滑动窗口代码: 2009. 使数组连续的最少操作数 思路:一、排序去重滑动窗口 1.对数组进行…

C语言代码块及块级作用域

代码块 所谓代码块,就是由{ }包围起来的代码。代码块在C语言中随处可见,例如函数体、选择结构、循环结构等。不包含代码块的C语言程序根本不能运行,即使最简单的C语言程序也要包含代码块。C语言允许在代码块内部定义变量,这样的变…

P8794 [蓝桥杯 2022 国 A] 环境治理

P8794 [蓝桥杯 2022 国 A] 环境治理 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include <iostream> using namespace std; #define ll long long const int N150; const int inf0x7fffffff; int n,q; int d[N][N],l[N][N]; int t[N][N]; void floyd() {for(int k0…

nandgame中的asm编程 Escape Labyrinth(逃离迷宫)

先翻译题目&#xff1a; 逃离迷宫计算机被困在火星上的迷宫中。编写一个程序&#xff0c;让它逃离迷宫。计算机配备了连接的轮子和前方障碍物探测器。与轮子和探测器的输入/输出是内存映射在地址7FFF上&#xff1a;对外设的输出信号&#xff1a; 位 设置为1代表&#xff1a; 2…

UE4_动画基础_ 使用分层动画(Using Layered Animations)

完成在移动过程中武器发射的角色制作&#xff01; 动画混合仅仅意味着在一个角色或骨架网格体上的两个或多个动画之间进行平滑过渡。在虚幻引擎4中&#xff0c;有多种方法可以应用这种混合&#xff0c;要么通过混合空间&#xff0c;或通过实际组合两个基于加权偏差或alpha值的…

C语言的数组

一、数组的赋值 对单个元素赋值 int a[3]; a[0] 3; a[1] 100; a[2] 34;整体赋值&#xff08;不指明数组长度&#xff09; float b[] { 23.3, 100.00, 10, 0.34 };整体赋值&#xff08;指明数组长度&#xff09; int m[10] { 100, 30, 234 };字符数组赋值 char str1[] &qu…

Java数组详解

​TOC 第一章、数组的概念介绍 1.1&#xff09;数组的概念 ①数组就是用来储存数据的容器,可以存储同一种类型的数据&#xff0c;是同一种数据类型的集合。实现对这些数据的统一管理。如果数组中存储的是基本类型数据&#xff0c;我就不能往里面存引用类型数据。数组中存储的…

全量知识系统 程序详细设计 “三次演算” 再探(QA)之1 (百度文库)

说明&#xff1a;以下关于全知系统中程序详细设计的沟通是基于今天正在完成中的全量知识系统 程序详细设计之“命名法” “正文”的" 前言" 之1 “前提”篇 中提出的所有程序要求的基础上的。 Q1.这些规则 在程序被设计为 λ表达式的三个转换规则&#xff0c;分别适…

CLIPSeg如果报“目标计算机积极拒绝,无法连接。”怎么办?

CLIPSeg这个插件在使用的时候&#xff0c;偶尔会遇到以下报错&#xff1a; Error occurred when executing CLIPSeg: (MaxRetryError("HTTPSConnectionPool(hosthuggingface.co, port443): Max retries exceeded with url: /CIDAS/clipseg-rd64-refined/resolve/main/toke…

【前端】深度选择器

升级vue2项目到vue3时候发现 the >>> and /deep/ combinators have been deprecated. Use :deep() instead.这是因为项目使用的 css 扩展语言是 dart-sass&#xff0c;不支持 /deep/ &#xff08;less/node-sass&#xff09;和 >>>&#xff08;css&#xff0…