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

文章目录

我们在上一章回中介绍了如何使用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等属性来控制页面显示的图片和标题等内容;

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

示例代码

dart 复制代码
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),
      ),
    ),
  ],
);

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

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

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

相关推荐
hello world smile12 天前
Flutter UT太多导致跑覆盖率报错
算法·flutter·移动开发·bash
hello world smile12 天前
Flutter 中的那些设计模式的写法(持续更新)
android·flutter·设计模式·移动开发
hello world smile14 天前
Android 实现一个系统级的悬浮秒表
android·移动开发·悬浮秒表
hello world smile16 天前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓
袁震21 天前
鸿蒙Harmony-多边形绘制组件Polygon使用详解
华为·移动开发·harmonyos·鸿蒙·harmony
袁震22 天前
鸿蒙Harmony-圆形绘制组件Circle使用详解
华为·移动开发·harmonyos·鸿蒙·harmony
第三女神程忆难1 个月前
Android Kotlin 高阶函数详解及其在协程中的应用
android·开发语言·kotlin·移动开发·安卓·高阶函数·1024程序员节
少恭写代码1 个月前
通过duxapp提供的基础方法、UI组件、全局样式,快速编写项目
react native·移动开发·taro·duxapp
氦客1 个月前
浅谈华为 HarmonyOS Next
android·华为·移动开发·harmonyos·next·概念·万物互联
_waylau1 个月前
HarmonyOS NEXT Release版本今日发布
华为·移动开发·harmonyos·arkts·鸿蒙