第四百五十六回

文章目录

  • 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/811414.shtml

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

相关文章

2024年 Mathorcup高校数学建模竞赛(C题)| 物流网络分拣中心 | 线性规划,流网络,多目标规划联合,小鹿学长带队指引全代码文章与思路

我是鹿鹿学长,就读于上海交通大学,截至目前已经帮200人完成了建模与思路的构建的处理了~ 本篇文章是鹿鹿学长经过深度思考,独辟蹊径,通过多目标规划解决物流网络分拣中心问题。结合线性规划,流网络等多元算…

数据结构-----枚举、泛型进阶(通配符?)

文章目录 枚举1 背景及定义2 使用3 枚举优点缺点4 枚举和反射4.1 枚举是否可以通过反射,拿到实例对象呢? 5 总结 泛型进阶1 通配符 ?1.1 通配符解决什么问题1.2 通配符上界1.3 通配符下界 枚举 1 背景及定义 枚举是在JDK1.5以后引入的。主要用途是&am…

c#使用TCP协议实现数据发送和接受

c#使用TCP协议实现数据发送和接受 使用TCP协议实现数据的发送和接受包括客户端和服务端两个部分; 1. 服务端代码如下所示: using System; using System.Net; using System.Net.Sockets; using System.Text;class Program {static void Main(){// 设置…

基于双向长短期神经网络LSTM的负荷预测,gru神经网络的负荷预测

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 BILSTM神经网络 基于双向长短期神经网络LSTM的负荷预测,gru神经网络的负荷预测 完整代码: 基于双向长短期神经网络LSTM的负荷预测,gru神经网络的负荷预测资源-CSDN文库 https://download.csdn.net/download/abc991835105/8910…

fastjson2 简单使用案例

maven 引入 <dependency><groupId>com.alibaba.fastjson2</groupId><artifactId>fastjson2</artifactId><version>2.0.43</version> </dependency>直接使用 Account account new .... // java类对象 // 将java对象转化为 J…

CMD命令窗口提示文字乱码

我下面说的是日文版系统&#xff0c;中文版会有差异。 一般情况下是 Shiftjis 通常我是用sakura editor来写bat&#xff0c;但是运行后会在cmd窗口出现乱码 test.bat set HENSU这是一个变数 echo %HENSU% pause 执行后出现乱码 原因是不做设置时&#xff0c;command prom…

3.2.k8s搭建-kubeadm

目录 一、虚拟机准备 二、所有节点环境准备 1.所有节点做hosts解析 2.所有节点重新命名 3.所有节点安装docker 4.所有节点为docker做linux内核转发 5.所有节点配置docker 6.所有节点关闭swap分区 7.所有节点验证网卡硬件编号是否冲突 8.所有节点配置允许iptables桥接…

【Docker】docker快速安装部署fastdfs的镜像详细记录

部署nacos的docker镜像 第一步&#xff1a; 获取fastdfs镜像1、查看镜像列表2、创建本地映射文件夹 第二步&#xff1a;运行镜像1.使用docker镜像构建tracker服务2.使用docker镜像构建Storage服务3.Storage服务中默认安装了Nginx服务4.如果需要修改storage则配置则进到以下目录…

【LeetCode热题100】【二叉树】二叉树展开为链表

题目链接&#xff1a;114. 二叉树展开为链表 - 力扣&#xff08;LeetCode&#xff09; 就先序遍历的顺序&#xff0c;其实就是简单的深度遍历顺序&#xff0c;装进一个容器里面再前一个后一个串连起来&#xff0c;注意容器的size是个无符号数&#xff0c;无符号数和有符号运行…

Vue.nextTick() 实现原理

Vue.nextTick() 实现原理 由于 Vue 的异步更新机制&#xff0c;当我们修改数据后立即获取DOM&#xff0c;获取到的是数据修改之前的DOM&#xff0c;如果想要获取数据更新后的 DOM&#xff0c;就需要使用Vue.nextTick() 方法 实现原理 Vue.nextTick() 方法的实现原理是基于浏览器…

【Linux】编写并运行Shell脚本程序操作实例

关于Shell脚本的介绍&#xff1a; Shell脚本是一种用于自动化任务和简化常见操作的脚本语言&#xff0c;通常用于Linux和Unix环境中。Shell脚本允许用户通过编写一系列命令和逻辑语句来执行一系列任务&#xff0c;从而提高了工作效率和自动化水平。 以下是关于Shell脚本的详细…

VUE3组合式API

create-vue create-vue是Vue官方新的脚手架工具&#xff0c;底层切换到了vite,为开发提供极速相应 使用create-vue 1.安装16.0或者更高版本的Node.js 2.npm init vuelatest指令会安装并执行create-vue 项目目录和关键文件 组合式API Vue 3引入了组合式API&#xff08;Com…

【Super数据结构】二叉搜索树与二叉树的非递归遍历(含前/中/后序)

&#x1f3e0;关于此专栏&#xff1a;Super数据结构专栏将使用C/C语言介绍顺序表、链表、栈、队列等数据结构&#xff0c;每篇博文会使用尽可能多的代码片段图片的方式。 &#x1f6aa;归属专栏&#xff1a;Super数据结构 &#x1f3af;每日努力一点点&#xff0c;技术累计看得…

《Sky光遇》无视steam锁区的两种下载入库游玩教程(图文一览)

玩家在光遇游戏中需要找到每一关的子民&#xff0c;然后穿过艰难险阻&#xff0c;最终在石碑前接受祝福&#xff0c;就是通过这一关了。玩家只有通关后会来到一个祭坛&#xff0c;从这个祭坛周围的门前往下一关或是回到遇境&#xff0c;通关就相当于是解锁地图场景&#xff0c;…

【Django开发】前后端分离美多商城项目第7篇:登录,使用登录的流程【附代码文档】

美多商城项目4.0文档完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;美多商城&#xff0c;项目准备1.B2B--企业对企业,2.C2C--个人对个人,3.B2C--企业对个人,4.C2B--个人对企业,5.O2O--线上到线下,6.F2C--工厂到个人。项目准备&#xff0c;配置1. 修改set…

C++——StackQueue

目录 一Stack 1介绍 2接口 3模拟实现 4栈的oj题 二Queue 1介绍 2接口 3模拟实现 三容器适配器 1再谈栈和队列 四优先级队列 1接口 ​编辑 2仿函数 五dequeue的简单介绍 一Stack 1介绍 先来看看库中对栈的介绍&#xff1a; 1. stack是一种容器适配器&#x…

Leetcode 150. 逆波兰表达式求值和Leetcode 55. 跳跃游戏

文章目录 Leetcode 150. 逆波兰表达式求值题目描述C语言题解和思路解题思路 Leetcode 55. 跳跃游戏题目描述C语言题解和思路解题思路 Leetcode 150. 逆波兰表达式求值 题目描述 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计…

开箱即用的 SpringBoot 企业级开发平台

项目概述 基于 Spring 实现的通用权限管理平台&#xff08;RBAC模式&#xff09;。整合最新技术高效快速开发&#xff0c;前后端分离模式&#xff0c;开箱即用。 核心模块包括&#xff1a;用户、角色、职位、组织机构、菜单、字典、日志、多应用管理、文件管理、定时任务等功能…

【AcWing】蓝桥杯集训每日一题Day32|贪心|1349.修理牛棚

1349.修理牛棚 1349. 修理牛棚 - AcWing题库难度&#xff1a;中等时/空限制&#xff1a;1s / 64MB总通过数&#xff1a;1275总尝试数&#xff1a;2405来源&#xff1a;usaco training 1.4算法标签贪心 题目内容 在一个下着暴风雨的夜晚&#xff0c;大风掀翻了农夫约翰的牛棚的…

鸿蒙TypeScript学习第13天:【元组】

1、TypeScript 元组 我们知道数组中元素的数据类型都一般是相同的&#xff08;any[] 类型的数组可以不同&#xff09;&#xff0c;如果存储的元素数据类型不同&#xff0c;则需要使用元组。参考文档&#xff1a;qr23.cn/AKFP8k 元组中允许存储不同类型的元素&#xff0c;元组…