第四百五十五回

文章目录

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

我们在上一章回中介绍了"overlay_tooltip用法"相关的内容,本章回中将介绍onBoarding包.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

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

2. 思路与方法

2.1 实现思路

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

2.2 使用方法

在上一小节中我们提到了包中的OnboardingStep和Onboarding这两个组件,它们提供了相关的属性来控制自己,接下来我们介绍一下它们常用的属性:

  • focusNode属性:主要用来提供OnboardingStep的索引;
  • titleText属性:主要用来显示解释内容的标题;
  • bodyText属性:主要用来显示解释内容的主体文本;
  • hasLabelBox: 是否在解释内容外侧的显示一个窗口;
  • hasArrow属性:是否在解释内容外侧的窗口上显示箭头;
  • arrowPosition属性:用来控制窗口外侧箭头在方向;
  • fullscreen属性:用来控制是否全屏显示模糊层;
  • overlayColor属性:主要用来控制模糊层的颜色;
  • stepBuilder属性:主要用来替代默认的提示窗口(LabelBox);
    上面介绍的是OnboardingStep组件中的常用属性,还有一些控制解释文本外层窗口(LabelBox)形状和风格的属性以及模糊层形状的属性没有介绍,这些属性的用法
    类似Container组件中控制形状和风格的属性。我们就不详细介绍了,接下来我们介绍Onboarding组件中的常用属性:
  • steps属性:用来存放所有的OnboardingStep组件,类似常用children属性;
  • onChanged属性:用来响应模糊层上的点击事件;
  • child属性:用来存放页面,通常把某个页面的scaffold组件赋值给它;
    Onboarding组件还有一个特点:点击模糊层时自动从当前的OnboardingStep切换到到下一个OnboardingStep;此外,我们可以通过Onboarding组件的GlobalKey
    来显示和隐藏OnboardingStep,下面是相关的代码:
 onboardingKey.currentState?.show();onboardingKey.currentState?.hide();

OnboardingStep组件在Scaffold的组件控制的页面中不能单独使用,而是借助FocusNode来显示,通常可以使用页面中其它组件的FocusNode属性,如果组件没有
该属性,那么需要使用Focus组件来包含OnboardingStep组件。

3. 内容总结

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

  • Onboarding包主要用来实现首次使用App时的功能引导;
  • 包中提供的OnboardingStep组件用来对某个功能做解析;
  • 包中提供的Onboarding组件用来管理所有的OnboardingStep组件;
  • 包中的OnboardingStep组件不能单独在页面中使用,需要借助于FocusNode来显示;
  • 包中的Onboarding组件可以自动从当前OnboardingStep切换到下一个OnboardingStep;
    看官们,与"onBoarding包简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

流动人员人事档案管理信息系统

流动人员人事档案管理信息系统是一种用于管理流动人员的人事档案的信息系统。该系统可以对流动人员的基本信息、工作经历、学历教育、培训记录、奖惩记录等进行管理和统计。通过该系统,可以方便地查询和维护流动人员的人事档案信息,提高人力资源管理的效…

核心api实操-Activiti7从入门到专家(5)

背景 上一节已经搭建了,具体的开发环境,数据库,并且找了一个可以用bpmnjs流程设计器,这一些,我们对核心api做个基础的实操,有个感性的认知,另外对数据库和基本数据流动有个理解。 部署 模板部…

从零自制docker-9-【管道实现run进程和init进程传参】

文章目录 命令行中输入参数长度过长匿名管道从父进程到子进程传参[]*os.File{}os.NewFile和io.ReadAllexe.LookPathsyscall.Execstrings.Split(msgStr, " ")/bin/ls: cannot access : No such file or directory代码 命令行中输入参数长度过长 用户输入参数过长或包…

CSS基础:border-radius圆角边框的4种写法规则以及网页实战应用的3个场景

你好,我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集 265篇…

SpringBoot 中的日志原来是这么工作的

在有些场景,能通过调整日志的打印策略来提升我们的系统吞吐量,你知道吗? 我们以Springboot集成Log4j2为例,详细说明Springboot框架下Log4j2是如何工作的,你可能会担心,如果是使用Logback日志框架该怎么办呢&#xff1…

01_QT编译报错:Cannot find file:问题解决

QT编译报错:Cannot find file:问题解决 报错原因:创建路径存在中文字符,将文件路径改为英文字符即可

多线程java

多线程的创建 前两种方法无法返回直接结果,而有的线程执行完毕后需要返回结果 方式一:java是通过java.lang.Thread类的对象来代表线程的 启动线程必须调用strat方法,不是调用run方法不要把主线程任务放在启动子线程之前 //1.让子类继承Thread线程类 public class MyThread …

阿里云服务器公网带宽费用全解析(不同计费模式)

阿里云服务器公网带宽怎么收费?北京地域服务器按固定带宽计费一个月23元/M,按使用流量计费0.8元/GB,云服务器地域不同实际带宽价格也不同,阿里云服务器网aliyunfuwuqi.com分享不同带宽计费模式下带宽收费价格表: 公网…

集群监控原理

3.1.2.集群监控原理 Sentinel基于心跳机制监测服务状态,每隔1秒向集群的每个实例发送ping命令: •主观下线:如果某sentinel节点发现某实例未在规定时间响应,则认为该实例主观下线。 •客观下线:若超过指定数量&…

Qt 中的项目文件解析和命名规范

🐌博主主页:🐌​倔强的大蜗牛🐌​ 📚专栏分类:QT❤️感谢大家点赞👍收藏⭐评论✍️ 目录 一、Qt项目文件解析 1、.pro 文件解析 2、widget.h 文件解析 3、main.cpp 文件解析 4、widget.cpp…

分享2024高校专业建设思路及建设效果

广东泰迪智能科技股份有限公司成立于2013年,是一家专业从事大数据、人工智能等数据智能技术研发、咨询和培训的高科技企业,公司基于十余年的数据智能产业实践经验,构建“产、岗、课、赛、证、文”融通的特色应用型人才培养模式,助…

蓝桥杯(填空题)

十四届 B组 日期统计(暴力枚举) 数据 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 5 7 0 9 9 1 9 4 4 6 8 6 3 3 8 5 1 6 3 4 6 7 0 7 8 2 7 6 8 9 5 6 5 6 1 4 0 1 0 0 9 4 8 0 9 1 2 8 5 0 2 5 3…

力扣 | 54. 螺旋矩阵

注意按照顺时针方向进行访问元素&#xff0c;以及每次触发的条件只会满足一个&#xff01; public List<Integer> spiralOrder(int [][] matrix){List<Integer> result new ArrayList<>();int m matrix.length;int n matrix[0].length;int row0,col 0;//…

python毕业设计django游泳馆管理系统-flask

游泳馆管理系统具有信息管理功能的选择。游泳馆管理系统采用python技术&#xff0c;基于mysql开发&#xff0c;实现了首页&#xff0c;教练信息&#xff0c;培训信息&#xff0c;交流版块&#xff0c;活动公告&#xff0c;个人中心&#xff0c;后台管理等内容进行管理&#xff…

计算机毕业设计 工厂车间设备管理系统php+vue.js

该系统是以PHP为主要开发语言&#xff0c;集合MySQL数据库技术构建基于Web的以信息为目标的&#xff0c;动态的交互平台 PHP与Apache&#xff0c;MySQL的组合虽然有着诸多优势&#xff0c;但三种出自不同作者的开源软件要能很好的配合工作&#xff0c;需要很多手工配置&#x…

WordPress JS Support Ticket插件 RCE漏洞复现

0x01 产品简介 WordPress和WordPress plugin都是WordPress基金会的产品。JS Support Ticket是使用在其中的一套开源票务系统插件。 0x02 漏洞概述 WordPress中的JS Support Ticket插件存在未经上传漏洞,未经身份验证的攻击者可以上传恶意脚本的服务器,执行任意指令,从而获…

【JavaEE初阶系列】——网络编程 TCP客户端/服务器 程序实现

目录 &#x1f6a9;TCP流套接字编程 &#x1f36d;ServerSocket API &#x1f36d;Socket API &#x1f36d;TCP服务器 &#x1f36d;TCP客户端 &#x1f6a9;TCP流套接字编程 俩个关键的类 ServerSocket (给服务器使用的类&#xff0c;使用这个类来绑定端口号&#xff0…

C语言程序与设计——工程项目开发

之前我们已经了解了C语言的基础知识部分&#xff0c;掌握这些之后&#xff0c;基本就可以开发一些小程序了。在开发时&#xff0c;就会出现合作的情况&#xff0c;C语言是如何协作开发的呢&#xff0c;将在这一篇文章进行演示。 工程项目开发 在开发过程中&#xff0c;你接到…

【算法每日一练]-图论(lca) 最近公共祖先LCA,货车运输

目录 P3379&#xff1a;最近公共祖先LCA 思路&#xff1a; 货车运输 P3379&#xff1a;最近公共祖先LCA 思路&#xff1a; 首先进行的预处理&#xff0c;将所有点的深度和p数组求出来 设置&#xff1a;p[i][j]存的从i向上走2的j次方那么长的路径到的父节点 更深的点走到和…

PostgreSQL入门到实战-第二十二弹

PostgreSQL入门到实战 PostgreSQL中表连接操作(六)官网地址PostgreSQL概述PostgreSQL中self-join命令理论PostgreSQL中self-join命令实战更新计划 PostgreSQL中表连接操作(六) 使用PostgreSQL自联接技术来比较同一表中的行 官网地址 声明: 由于操作系统, 版本更新等原因, 文…