滑块组件,可以在指定的最大值和最小值之间拖动选择。可指定颜色、分段数及显示的标签,接收进度变化回调。

相关组件

CupertinoSlider RangeSlider SliderTheme

Slider基本使用

  1. <br />【value】 : 数值 【double】<br />【min】 : 最小值 【double】<br />【max】 : 最大值 【double】<br />【activeColor】 : 激活颜色 【Color】<br />【inactiveColor】 : 非激活颜色 【Color】<br />【onChanged】 : 改变时回调 【Function(double)】<br />![89.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445861662-ac1245f1-5a42-4418-b3cf-8cf6c5ccc360.gif#align=left&display=inline&height=79&margin=%5Bobject%20Object%5D&name=89.gif&originHeight=79&originWidth=404&size=138058&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class CustomSlider extends StatefulWidget {
  @override
  _CustomSliderState createState() => _CustomSliderState();
}

class _CustomSliderState extends State<CustomSlider> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('当前值:${_value.toStringAsFixed(1)}'),
        Slider(
            value: _value,
            min: 0.0,
            max: 360.0,
            activeColor: Colors.orangeAccent,
            inactiveColor: Colors.green.withAlpha(99),
            onChanged: (value) {
              setState(() {
                _value = value;
              });
            }),
      ],
    );
  }
}

Slider的分段与标签

   <br />【divisions】 : 分段数   【int】<br />【label】 : 提示气泡文字   【String】<br />【onChangeStart】 : 开始滑动时监听   【Function(double)】<br />【onChangeEnd】 : 滑动结束时监听   【Function(double)】<br />![90.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445966681-7b82f12e-281b-4a68-960f-7ceb4c77a34b.gif#align=left&display=inline&height=146&margin=%5Bobject%20Object%5D&name=90.gif&originHeight=146&originWidth=404&size=156643&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class DivisionsSlider extends StatefulWidget {
  @override
  _DivisionsSliderState createState() => _DivisionsSliderState();
}

class _DivisionsSliderState extends State<DivisionsSlider> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Slider(
        value: _value,
        min: 0.0,
        max: 360.0,
        divisions: 10,
        label: '${_value.toStringAsFixed(1)}',
        activeColor: Colors.orangeAccent,
        inactiveColor: Colors.green.withAlpha(99),
        onChangeStart: (value) {
          print('开始滑动:$value');
        },
        onChangeEnd: (value) {
          print('滑动结束:$value');
        },
        onChanged: (value) {
          setState(() {
            _value = value;
          });
        });
  }
}