第一百四十三回 如何实现程序引导画面介绍

我们在上一章回中介绍了如何使用intl插件实现国际化相关的内容，本章回中将介绍 如何实现程序引导画面.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的程序引导画面就是指首次打开程序时用来介绍程序功能的画面，它通常有多个页面，每个页面介绍不同的功能，用户可以滑动页面来查看不同页面中的内容。为了方便说明，我们简称它为引导页，本章回将介绍如何实现引导页。

实现方法

实现的引导页可以使用pageView，它可以存放多个page,然后在底部添加指示器和按钮，指示器用来指示页面滑动，按钮用来切换页面。这个思路不是很复杂，大家可以按照这个思路来实现引导页。

本章回将介绍一个三方包：introduction_screen，该包可以直接拿来当作引导页,下面是它的使用方法：

1. 在yaml文件中导入introdution_screen包;
2. 该包把所有的内容封装成一个类IntroductionScreen，直接使用该类就可以创建引导页；
3. 使用类中的showXXXButton属性来显示引导页底部的按钮，并且给按钮添加相应的响应功能；
4. 使用dotsDecorator属性来修改指示器的风格，默认是圆形指示器，可以修改成矩形指示器；
5. 使用pages属性来存放页面，它类似childer属性，不过它只能存放PageViewModel类型的对象；
6. 页面使用PageViewModel类表示，该类提供了title,image等属性来控制页面显示的图片和标题等内容；

按照上面的内容可以创建一个基本的引导页，如果想定制自己的引导页，那么可以使用类中相关的属性来控制页面。在下面的小节中我们将通过代码来演示它的用法。

示例代码

IntroductionScreen(
  ///控制是否动滚动，和滚动时间，默认不滚动,滚动时间单位是毫秒
  infiniteAutoScroll: true,
  autoScrollDuration: 2000,

  ///控制按钮中文字的风格和按钮的行为
  showBackButton: false,
  back: const Text('back'),
  showBottomPart: true,
  showDoneButton: true,
  doneStyle: TextButton.styleFrom(backgroundColor: Colors.orange,foregroundColor: Colors.white),
  done:const Text('done'),
  onDone: (){},
  showNextButton: true,
  next: const Text('next'),
  nextStyle: TextButton.styleFrom(backgroundColor: Colors.orange,foregroundColor: Colors.white),
  showSkipButton: true,
  skip: const Text('skip'),
  skipStyle: TextButton.styleFrom(backgroundColor: Colors.orange,foregroundColor: Colors.white),

  ///控制底部指示点的颜色，大小，形状,间隔
  dotsDecorator:const DotsDecorator(
    spacing: EdgeInsets.symmetric(horizontal: 10),
    color: Colors.black45,
    activeColor: Colors.purpleAccent,
    activeSize: Size(16, 8),
    activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.horizontal(left:Radius.circular(15) ,right: Radius.circular(12)),),
  ),

  ///用来存放显示的页面
  pages: [
    PageViewModel(
      title: 'title of intro page',
      body: 'body of intro page',
      ///图片外层需要嵌套一层位置类容器
      image: const Center(
        ///控制图片的大小和填充
        child:Image(image: AssetImage("images/ex.png"),height: 500,fit: BoxFit.cover,),
      ),
      decoration: const PageDecoration(
        fullScreen: true,
        titleTextStyle: TextStyle(color: Colors.deepPurpleAccent,),
        bodyAlignment: Alignment.bottomLeft,
        ///image以外区域的颜色
        pageColor: Colors.blue,
      )
    ),
    PageViewModel(
      title: 'title of intro page',
      body: 'body of intro page',
      image: const Center(
        child: Icon(Icons.ac_unit),
      ),
    ),
    PageViewModel(
      title: 'title of intro page',
      body: 'body of intro page',
      image: const Center(
        child: Icon(Icons.pages),
      ),
    ),
  ],
);

在上面的示例代码中，我们在关键位置添加了相应的注释，方便大家理解程序，编译并且运行上面的程序就可能看到一个引导页，引导页包含三个页面，第一个页面显示一张图片，其它两个页面显示图标。引导页的底部是按钮和圆形页面指示器。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

此外，这个包封装的功能比较多，包中还有很多的属性等待大家去挖掘，大家可以通过不同的属性定制属于自己的引导页。

看官们，与"如何实现程序引导画面"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!