简介

用来选择范围性的数据

slider 用来选择连续性的或者非连续性的数据. 默认是在一段最大值最小值间做任意值的选择. 如果你想选择间隔性的值, 例如0.0到50.0间,选择10, 15,...50.0这样的值, 给divisions设定一个非空的整数5,, 去分割区间范围.

基本用法

关于slider有以下的术语:

thumb 滑块用户可以水平拖拽移动的区域
track 滑轨 thumb 可以滑动的线条区域
value indicator 值指示器当用户拖拽thumb的时候. 显示用户当前所选的属性值
active 选中区
inactive 非选中区

如果onChanged属性为空或者min .. max给出的范围为空（例如如果min等于max），则将禁用滑块。

滑块小部件本身不保持任何状态State。相反，当滑块状态发生变化时，窗口小部件会调用 onChanged 回调。大多数使用滑块的小部件将侦听 onChanged 回调并使用新值重建滑块以更新滑块的视觉外观。要知道值何时开始更改，或何时更改，请设置可选回调onChangeStart或onChangeEnd。

默认情况下，滑块将尽可能宽，垂直居中。当给定无限制约束时，它将尝试使轨道宽144像素（每边有边距）并垂直收缩。

实例演示

import 'package:flutter/material.dart';

class SliderDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<SliderDemo> {
  double value = 0.0;
  Widget build(BuildContext context) {
    return  Slider(
      value: value,//实际进度的位置
      inactiveColor: Colors.black12,//进度中不活动部分的颜色
      label: 'value: $value',
      min: 0.0,
      max: 100.0,
      divisions: 1000,
      activeColor: Colors.blue,//进度中活动部分的颜色
      onChanged: (double){
        setState(() {
          value = double.roundToDouble();
        });
      },
    );
  }

}



class SliderThemeDemo extends StatefulWidget {
  _SliderThemeDemo createState() => _SliderThemeDemo();
}

class _SliderThemeDemo extends State<SliderThemeDemo> {
  double value = 0.0;
  Widget build(BuildContext context) {
    return  Container(
      child:  SliderTheme(
        data: SliderTheme.of(context).copyWith(
//                activeTickMarkColor:Colors.yellowAccent,
          activeTrackColor: Colors.yellowAccent,//实际进度的颜色
//                inactiveTickMarkColor:Colors.black
          thumbColor: Colors.black,//滑块中心的颜色
          inactiveTrackColor:Colors.red,//默 认进度条的颜色
          valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
          valueIndicatorTextStyle:  TextStyle(//提示气泡里面文字的样式
            color: Colors.white,
          ),
          inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
          overlayColor: Colors.pink,//滑块边缘颜色
        ),
        child:  Container(
          width: 340.0,
          margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
          child:  Row(
            children: <Widget>[
               Text('0.0'),
               Expanded(
                flex: 1,
                child:  Slider(
                  value: value,
                  label: '$value',
                  divisions: 10,
                  onChanged: (double){
                    setState(() {
                      value=double.floorToDouble();//转化成double
                    });
                  },
                  min: 0.0,
                  max: 100.0,
                ),
              ),
               Text('100.0'),
            ],
          ),
        ),
      ),
    );
  }
}