第四百五十六回

文章目录

  • 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.rhkb.cn/news/306725.html

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

相关文章

睿尔曼复合机器人之底盘操作流程

以操作流程为例,介绍底盘的操作流程。 开机:长按电源按钮,蜂鸣器短响两声,当第三声变长鸣后松开,等待机器开机。 使用: 建立通讯:主要采用无线WiFi与底盘进行通讯连接 无线连接方式&#xff…

docker最简单教程(使用dockerfile构建环境)

一 手里有的东西 安装好的docker+dockerfile 二 操作 只需要在你的dockerfile文件下执行命令 docker build -t="xianhu/centos:gitdir" . 将用户名、操作系统和tag进行修改就可以了,这就相当于在你本地安装了一个docker环境,然后执行 docker run -it xianhu/ce…

2024/4/5—力扣—下一个排列

代码实现&#xff1a; 思路&#xff1a;两遍扫描 void swap(int *a, int *b) {int t *a;*a *b;*b t; }void reverse(int *nums, int l, int r) {while (l < r) {swap(nums l, nums r);l;r--;} }void nextPermutation(int *nums, int numsSize) {int i numsSize - 2;wh…

循环新蓝海,“新”从“旧”中来

浙江安吉&#xff0c;是“两山”理念——“绿水青山就是金山银山”的发源地&#xff0c;也是众多循环经济和绿色产业的根据地。这里汇集了大批已上市和待上市的相关公司的总部&#xff0c;年初刚递表港交所的闪回科技&#xff0c;就是其中之一。 主营二手手机回收和销售的闪回…

关于nvm node.js的按照

说明&#xff1a;部分但不全面的记录 因为过程中没有截图&#xff0c;仅用于自己的学习与总结 过程中借鉴的优秀博客 可以参考 1,npm install 或者npm init vuelatest报错 2&#xff0c;了解后 发现是nvm使用的版本较低&#xff0c;于是涉及nvm卸载 重新下载最新版本的nvm 2…

python知识点汇总(十一)

python知识点总结 1、当Python退出时&#xff0c;是否会清除所有分配的内存&#xff1f;2、Python的优势有哪些&#xff1f;3、什么是元组的解封装4、Python中如何动态获取和设置对象的属性&#xff1f;5、创建删除操作系统上的文件6、主动抛出异常7、help() 函数和 dir() 函数…

大型网站系统架构演化

大型网站质量属性优先级&#xff1a;高性能 高可用 可维护 应变 安全 一、单体架构 应用程序&#xff0c;数据库&#xff0c;文件等所有资源都在一台服务器上。 二、垂直架构 应用和数据分离&#xff0c;使用三台服务器&#xff1a;应用服务器、文件服务器、数据服务器 应用服…

基于Python的LSTM网络实现单特征预测回归任务(pytorch版)

一、数据集 自建数据集--【load.xlsx】。包含2列&#xff1a; date列&#xff08;时间列&#xff0c;记录2022年6月2日起始至2023年12月31日为止&#xff0c;日度数据&#xff09;price列&#xff08;价格列&#xff0c;记录日度数据对应的某品牌衣服的价格&#xff0c;浮点数…

linux使用docker实现redis主从复制和哨兵模式

目录 1. 拉取redis镜像 2.使用可视化redis工具 3. 设置从redis 4.设置哨兵模式 5. 使用docker-compose快速创建 1. 拉取redis镜像 docker pull redis 默认拉取最新的镜像。 然后pull结束后使用docker images检查镜像&#xff1a; 然后docker run创建container容器 首先…

matplotlib手动调用默认配色

matplotlib 画图有个默认配色方案&#xff0c;在画不同图时会保持一致。如&#xff1a; import numpy as np import matplotlib.pyplot as plt# 图 1 数据 x np.arange(12).astype(np.float32) 1 y1 np.log(x) y2 1 / x y3 np.sin(x) # 图 2 数据 a np.random.randn(200…

耐受强酸碱PFA试剂瓶高纯实验级进口聚四氟乙烯材质取样瓶

PFA取样瓶作为实验室中常备器皿耗材之一&#xff0c;主要用来盛放、储存和运输样品&#xff0c;根据使用条件不同&#xff0c;也可叫特氟龙试剂瓶、样品瓶、储样瓶、广口瓶、进样瓶等。广泛应用于半导体、新材料、多晶硅、硅材、微电子等行业。近年来随着新兴行业的快速发展&am…

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

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

PHP01——php快速入门 之 使用phpstudy快速搭建PHP环境

PHP01——php快速入门 之 使用phpstudy快速搭建PHP环境 0. 前言1. 下载小皮面板1.1 下载phpstudy&#xff08;小皮面板&#xff09;1.2 启动、简单访问1.2.1 启动Apache1.2.2 访问1.2.3 访问自定义文件或页面 2. 创建网站2.1 创建网站2.2 可能遇到的问题2.2.1 hosts权限问题&am…

PTA(题目集一 题目 代码 C++ 注解)

目录 题目一&#xff1a; 代码&#xff1a; 题目二&#xff1a; 代码&#xff1a; 题目三&#xff1a; 代码&#xff1a; 题目四&#xff1a; 代码&#xff1a; 题目五&#xff1a; 代码&#xff1a; 题目六&#xff1a; 代码&#xff1a; 题目七&#xff1a; 代…

十五届web模拟题整理

模拟赛一期 1.动态的Tab栏 请在 style.css 文件中补全代码。 当用户向下滚动的高度没有超过标题栏&#xff08;即 .heading 元素&#xff09;的高度时&#xff0c;保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时&#xff0c;固定显示 Tab 栏在网页顶部。 /* TODO…

微服务项目实战-黑马头条(一):环境搭建 + APP登录功能【前端静态资源+nginx反向代理+网关+过滤器】

文章目录 一、搭建nacos二、初始工程的搭建2.1 环境准备2.2主体结构 三、APP登录3.1 需求分析3.2 表结构分析3.3 接口定义3.4 功能实现 四、接口工具postman、swagger、knife4j4.1 postman4.2 swagger4.3 knife4j 五、网关5.1 网关搭建5.2 全局过滤器实现jwt校验 六、前端集成6…

解决PyCharm更新到2024.1版本后不能运行项目的问题

先来看看这个问题的表现吧。 1、运行和调试按钮是灰色的&#xff0c;并且显示编辑器中的文件不可运行&#xff0c;代码也是灰色的&#xff0c;还有我们的python文件的图标和文本文件的图标一样。 当然右键也是没有运行、调试选项。 2、无法创建新的项目和py文件&#xff0c;能…

【静态分析】静态分析笔记01 - Introduction

参考&#xff1a; BV1zE411s77Z [南京大学]-[软件分析]课程学习笔记(一)-introduction_南京大学软件分析笔记-CSDN博客 ------------------------------------------------------------------------------------------------------ 1. program language and static analysis…

动态规划(背包问题)

一:动态规划概述: 动态规划实际上是一种将原本的 大 方面的问题转化为许许多多的 小方面 的一种应用, 在一定程度上避免数据的重复, 并且能够将数据以自己希望的方式进行存储, 用来解决多阶段的数学问题, 从而提高算法的效率 在算法当中, 动态规划主要包括有: 递推, 线性DP 记忆…

ssm040安徽新华学院实验中心管理系统的设计与实现+jsp

实验中心管理系统 摘 要 本安徽新华学院实验中心管理系统的设计目标是实现安徽新华学院实验中心的信息化管理&#xff0c;提高管理效率&#xff0c;使得安徽新华学院实验中心管理工作规范化、科学化、高效化。 本文重点阐述了安徽新华学院实验中心管理系统的开发过程&#x…