34Flutter Slider滑动条

Flutter之滑动条——Slider

1.简介

Slider是Flutter中的滑动条组件，类似于Android中的SeekBar

2.属性

const Slider({
    Key key,
    @required this.value, //滑块当前位置值
    @required this.onChanged, //拖动滑块过程中持续调用
    this.onChangeStart, //滑动开始值
    this.onChangeEnd, //滑动结束值
    this.min = 0.0, //可选最小值
    this.max = 1.0, //可选最大值
    this.divisions, //分段
    this.label, //当滑块滑动时，在滑块上方显示的标签。
    this.activeColor, //滑块及左侧轨道颜色
    this.inactiveColor, //右侧轨道颜色
    this.semanticFormatterCallback,//用于根据滑块值创建语义值的回调。未验证出来有什么用
    })

3.案例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: CustomScrollViewDemo(),
      home: Scaffold(
        body: Center(
          child: SliderDemo(),
        ),
      ),
    );
  }
}


class SliderDemo extends StatefulWidget {
  SliderDemo({Key key}) : super(key: key);

  @override
  _SliderDemoState createState() {
    return _SliderDemoState();
  }
}

class _SliderDemoState extends State<SliderDemo> {
  var sliderValue = 20.0;
  var sliderValue1 = 20.0;
  Widget _buildSlider() {
    return Wrap(
      children: <Widget>[
        Slider(
          value: sliderValue,
          min: 0,
          max: 100,
          onChanged: (value) {
            print("slider value1 = $value");
            //slider value1 = 0.5019047328404018
            setState(() {
              sliderValue = value;
            });
          },
        ),
        Slider(
          value: sliderValue1,
          min: 0,
          max: 100,
          activeColor: Colors.red,
          inactiveColor: Colors.blue.withAlpha(50),
          divisions: 4,
          label: "${sliderValue1 / 1}",
          semanticFormatterCallback: (value) {
            return '$sliderValue1 dollars';
          },
          onChanged: (value) {
            setState(() {
              sliderValue1 = value;
            });
          },
          onChangeStart: (value) {
            print("onChange Start = $value");
          },
          onChangeEnd: (value) {
            print("onChange End = $value");
          },
        ),
      ],
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return _buildSlider();
  }
}

4.SliderTheme

SliderTheme可以更灵活的设置滑块样式

属性	含义
trackHeight	滑条高度
activeTrackColor	已拖动的颜色
inactiveTrackColor	/未拖动的颜色
valueIndicatorColor	提示进度的气泡的背景色
thumbShape	滑块形状
valueIndicatorTextStyle	//提示进度的气泡文本的颜色
valueIndicatorColor	提示进度的气泡的背景色
thumbColor	滑块中心的颜色
inactiveTickMarkColor	divisions对进度线分割后，断续线中间间隔的颜色
overlayColor	滑块边缘的颜色

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SliderTheme组件',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('SliderTheme组件'),
        ),
        body: Center(child: DemoPage(),),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key: key);

  @override
  DemoPageState createState() => DemoPageState();
}

class DemoPageState extends State<DemoPage> {

  double value = 0.0;

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        //已拖动的颜色
        activeTrackColor: Colors.greenAccent,
        //未拖动的颜色
        inactiveTrackColor: Colors.green,

        //提示进度的气泡的背景色
        valueIndicatorColor: Colors.green,
        //提示进度的气泡文本的颜色
        valueIndicatorTextStyle: TextStyle(
          color:Colors.white,
        ),
        trackHeight: 3,
        //滑块中心的颜色
        thumbColor: Colors.blueAccent,
        //滑块边缘的颜色
        overlayColor: Colors.red,

        //divisions对进度线分割后，断续线中间间隔的颜色
        inactiveTickMarkColor: Colors.white,
      ),
      child: Slider(
        value: value,
        label: '$value',
        min: 0.0,
        max: 100.0,
        divisions: 10,
        onChanged: (val){
          setState(() {
            value = val.floorToDouble();//转化成double
          });
        },
      ),
    );
  }
}