第五十九回: Slider Widget

文章目录

  • 概念介绍
  • 使用方法
  • 示例代码

我们在上一章回中介绍了Form Widget相关的内容,本章回中将介绍 Slider Widget.闲话休提,让我们一起Talk Flutter吧。

概念介绍

我们在这里说的Slider Widget是一种滑动条组件,通过滑动来控制不同的进度,它类似进度条,不过需要我们让去去滑动它的是进度,在实际项目中经常用它来调节音量大小或者视频播放进度。本章回将详细介绍该组件的使用方法。

使用方法

和其它组件一样,Slider Widget提供了相关的属性来控制自己,接下来我们将介绍该组件中常用的属性:

  • value属性: 主要用来设定滑动条当前的进度值;
  • onChanged属性:该属性是方法类型,当滑动组件时回调该属性对应的方法;
  • min属性:主要用来设置滑动范围的最小值;
  • max属性:主要用来设置滑动范围的最大值;
  • divisions属性:主要用来设定滑动范围的步进值;
  • activeColor属性:主要用来设定滑动条上已经滑过的颜色值;
  • inactiveColor属性:主要用来设定滑动条上没有滑过的颜色值;

上面这些属性中前两个属性是必选属性,其它属性是可选属性。不过最好还是给这些属性赋值,比如如果不指定min/max属性的值,默认值的范围在0.0-1.0之间。这个范围可能不符合我们项目中的要求。注意value的值必须在min/max限制的范围内,不然编译时没有问题,但是在运行时会发生错误。

示例代码

Slider(
  //指定滑动值的范围,如果不指定,默认值的范围在0.0 - 1.0之间
  min: 0.0,
  max: 10.0,
  //步进值
  divisions: 10,
  //设定当前值
  value: _slideValue,
  //变化时回调,在回调中修改slider当前显示的值
  onChanged: (value) {
    setState(() {
      _slideValue = value;
      print("value = $value");
    });
  },
  activeColor: Colors.purpleAccent,
  inactiveColor: Colors.green,
),

我们在上面的代码中添加了详细的注释,方便大家理解程序。此外,我们在onChange对应的方法中通过setState()方法修改了value属性中的值,这样就可以让滑动条跟着滑动的进度进行变化,同时我们还在这里添加了日志信息。

我在这里就不演示程序的运行结果了,建议大家自己动手去实践,一方面可以体会到滑动条的变化,另一方面可以通过日志看到变化的值,可以看值的范围和步进是否和属性中设置的值一致。

看官们,关于Slide Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,android,flutter,slider,滑动条,滑动进度条)