第四百六十七回

FlutterOnboarding包：功能引导组件的使用与实现

最新推荐文章于 2025-12-03 18:49:33 发布

原创最新推荐文章于 2025-12-03 18:49:33 发布 · 741 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #移动开发Flutter

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

本文介绍了Flutter中的onBoarding包，用于实现应用首次使用时的功能引导，包括OnboardingStep组件展示功能说明和Onboarding组件管理步骤。OnboardingStep需配合FocusNode使用，Onboarding可自动切换步骤。

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