Flutter 小知识:Slider,CupertinoSlider滑动条

失败是什么？没有什么，只是更走近成功一步；成功是什么？就是走过了所有通向失败的路，只剩下一条路，那就是成功的路。

Slider

普通风格进度条

加粗是必传参数

Slider进度条参数	类型	说明
label	String	分段提示 配合divisions使用
divisions	int	将视频分为5段 只能滑动到5段上的某个位置
activeColor	Color	已滑动过得颜色
inactiveColor	Color	未滑动的颜色
min	double	默认为0.0。必须小于或等于[最大值] 如果[max]等于[min]，则滑块被禁用。
max	double	默认为1.0。必须大于或等于[min]。 如果[max]等于[min]，则滑块被禁用。
value	double	当前进度 取值(0 - 1)
onChanged	ValueChanged<double>	进度条进度 返回值为(0-1)
onChangeStart	ValueChanged<double>	滑动开始回调
onChangeEnd	ValueChanged<double>	滑动结束回调

 //当前播放视频进度条进度
  double _slidervalue = 0.0;

  //滑动进度条
  Widget buildSilder() {
    return Row(
      children: [
      //开始文字
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
        Expanded(
          child: Slider(
            //分段提示 配合divisions使用
            label: "$_slidervalue _slidervalue",

            ///将视频分为5段 只能滑动到5段上的某个位置
            divisions: 5,

            ///已滑动过得颜色
            activeColor: Colors.red,

            ///未滑动的颜色
            inactiveColor: Colors.cyan,

            ///默认为0.0。必须小于或等于[最大值]
            ///如果[max]等于[min]，则滑块被禁用。
            min:  0,

            ///默认为1.0。必须大于或等于[min]。
            ///如果[max]等于[min]，则滑块被禁用。
            max: 1,

            ///当前进度 取值(0 - 1)
            value: _slidervalue,

            //进度条进度 返回值为(0-1)
            onChanged: (double value) {
              setState(() {
                _slidervalue = value;
              });
            },
            //滑动开始回调
            onChangeStart: (double value){
              Toast.toast(context,msg: "滑动开始$value");
            },
            //滑动结束回调
            onChangeEnd: (double value){
              Toast.toast(context,msg: "滑动结束$value");
            },
          ),
        ),
        //结束文字
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
      ],
    );
  }

效果图(1.1)

CupertinoSlider

苹果风格滑动条

加粗是必传参数

CupertinoSlider进度条参数	类型	说明
divisions	int	将视频分为5段 只能滑动到5段上的某个位置
activeColor	Color	进度条颜色
thumbColor	Color	滑动按钮颜色
min	double	默认为0.0。必须小于或等于[最大值] 如果[max]等于[min]，则滑块被禁用。
max	double	默认为1.0。必须大于或等于[min]。 如果[max]等于[min]，则滑块被禁用。
value	double	当前进度 取值(0 - 1)
onChanged	ValueChanged<double>	进度条进度 返回值为(0-1)
onChangeStart	ValueChanged<double>	滑动开始回调
onChangeEnd	ValueChanged<double>	滑动结束回调

/// 苹果风格滑动条
  Widget initCupertinoSlider() {
    return CupertinoSlider(
      // ///将视频分为5段 只能滑动到5段上的某个位置
      divisions: 5,

      ///已滑动过得颜色
      activeColor: Colors.red,

      ///未滑动的颜色
      thumbColor: Colors.cyan,

      ///默认为0.0。必须小于或等于[最大值]
      ///如果[max]等于[min]，则滑块被禁用。
      min: 0,

      ///默认为1.0。必须大于或等于[min]。
      ///如果[max]等于[min]，则滑块被禁用。
      max: 1,

      ///当前进度 取值(0 - 1)
      value: _slidervalue,

      //进度条进度 返回值为(0-1)
      onChanged: (double value) {
        setState(() {
          _slidervalue = value;
          //拖动进度条改变视频长度
        });
      },
      //滑动开始回调
      onChangeStart: (double value) {
        Toast.toast(context, msg: "滑动开始$value");
      },
      //滑动结束回调
      onChangeEnd: (double value) {
        Toast.toast(context, msg: "滑动结束$value");
      },
    );
  }

效果图(1.2):

用到Demo:

Flutter 小知识:ListView播放视频列表(二)

猜你喜欢:

Flutter Slider,CupertinoSlider滑动条

Flutter Sliver大家族之CustomScrollView和SliverAppBar 组件①

Flutter Sliver大家族之SliverList(),SliverFixedExtentList(),SliverGrid()组件②

Flutter Sliver大家族之SliverPersistentHeader()和SliverToBoxAdapter()组件③

原创不易,您的点赞就是对我最大的支持,留下您的点赞吧~