文章目录
- 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包简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!