第四百五十二回

发布于:2024-04-10 ⋅ 阅读:(145) ⋅ 点赞:(0)


我们在上一章回中介绍了"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包简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

网站公告

今日签到

点亮在社区的每一天
去签到