Slider-滑块组件

作者: 爱吃豆包 | 来源:发表于2021-01-09 20:48 被阅读0次

Slider-滑块组件
2018-02-11
React-Native Slider滑竿使用
UI组件——滑块简介
jquery .on(event.namespace)
React Native 实现环形滑块
微信小程序公告滚动通知
基于el-slider自定义range组件封装实践
uniapp 自定义封装tab
微信小程序的视图容器—swiper

Slider 和 RangeSlider

#Slider

基础用法：

class SliderDemo extends StatefulWidget {
  @override
  _SliderDemoState createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _sliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('值：$_sliderValue'),
            Slider(
              value: _sliderValue,
              onChanged: (v){
                setState(() {
                  _sliderValue = v;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

value：当前值。
onChanged：滑块值改变时回调。

image

看看 Flutter 1.20 版本以前的样式（我的珍藏）：

image

明显的感觉就是滑块轨道变粗了，滑块变的更有立体感（加了阴影）了。

Slider 默认滑动范围是 0-1，修改为 1-100:

Slider(
  value: _sliderValue,
  min: 1,
  max: 100,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)

image

设置滑块的滑动为 离散的，即滑动值为 0、25 、50、75 100：

Slider(
  value: _sliderValue,
  min: 0,
  max: 100,
  divisions: 4,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)

image

设置标签，滑动过程中在其上方显示：

Slider(
  value: _sliderValue,
  label: '$_sliderValue',
  min: 0,
  max: 100,
  divisions: 4,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)

image

看看 Flutter 1.20 版本以前的样式（依然是我的珍藏）：

image

个人感觉以前的更好看。

下面是官方给的 Slider 结构图：

image

1 ：轨道（Track），1 和 4 是有区别的，1 指的是底部整个轨道，轨道显示了可供用户选择的范围。对于从左到右（LTR）的语言，最小值出现在轨道的最左端，而最大值出现在最右端。对于从右到左（RTL）的语言，此方向是相反的。
2：滑块（Thumb），位置指示器，可以沿着轨道移动，显示其位置的选定值。
3：标签（label），显示与滑块的位置相对应的特定数字值。
4：刻度指示器（Tick mark），表示用户可以将滑块移动到的预定值。

自定义滑块 激活的颜色 和 未激活的颜色：

Slider(
  activeColor: Colors.red,
  inactiveColor: Colors.blue,
  value: _sliderValue,
  label: '$_sliderValue',
  min: 0,
  max: 100,
  divisions: 4,
  onChanged: (v){
    setState(() {
      _sliderValue = v;
    });
  },
)

image

#自定义样式

这个自定义比较笼统，下面来一个更细致的自定义：

SliderTheme(
  data: SliderTheme.of(context).copyWith(
      activeTrackColor: Color(0xff404080),
      thumbColor: Colors.blue,
      overlayColor: Colors.green,
      valueIndicatorColor: Colors.purpleAccent),
  child: Slider(
    value: _sliderValue,
    label: '$_sliderValue',
    min: 0,
    max: 100,
    divisions: 4,
    onChanged: (v) {
      setState(() {
        _sliderValue = v;
      });
    },
  ),
)

image

这个基本可以完全自定义样式了。

如何在 Flutter 1.20 版本使用以前的标签样式呢？

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    valueIndicatorShape: PaddleSliderValueIndicatorShape(),
  ),
  child: Slider(
    value: _sliderValue,
    label: '$_sliderValue',
    min: 0,
    max: 100,
    divisions: 4,
    onChanged: (v) {
      setState(() {
        _sliderValue = v;
      });
    },
  ),
)

image

RectangularSliderValueIndicatorShape 表示矩形样式：

image

#RangeSlider

RangeSlider 和 Slider 几乎一样，RangeSlider 是范围滑块，想要选择一段值，可以使用 RangeSlider。

RangeValues _rangeValues = RangeValues(0, 25);

RangeSlider(
  values: _rangeValues,
  labels: RangeLabels('${_rangeValues.start}','${_rangeValues.end}'),
  min: 0,
  max: 100,
  divisions: 4,
  onChanged: (v) {
    setState(() {
      _rangeValues = v;
    });
  },
),

image

#滑块状态

image

#ios风格的 Slider

ios风格的 Slider，使用 CupertinoSlider：

double _sliderValue = 0;
CupertinoSlider(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)

image

当然也可以根据平台显示不同风格的Slider，ios平台显示CupertinoSlider效果，其他平台显示Material风格，用法如下：

Slider.adaptive(
  value: _sliderValue,
  onChanged: (v) {
    setState(() {
      _sliderValue = v;
    });
  },
)

代码：



import 'package:flutter/material.dart';

/**
 * Slider 滑块组件
 */
class SliderDemo extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return SliderDemoState();
  }

}

class SliderDemoState extends State<SliderDemo> {

  var _sliderNum = 0.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Slider(
             activeColor: Colors.red, // 已经激活的颜色(滑块之后的)
             inactiveColor: Colors.blue, // 未激活的颜色(滑块之前的)
            label: '$_sliderNum', // 需要设置 divisions 属性才会有显示
            divisions: 4, // 表示拖完整个进度条需要几次，这里设置4次
            value: _sliderNum, 
            onChanged: (value) {
              setState(() {
                _sliderNum = value;
              });
            }
          ),
          // 自定义样式的进度条
          Text("自定义样式进度条"),
          // 自定义滑块颜色
          SliderTheme(
            data: SliderTheme.of(context).copyWith(
              activeTrackColor: Color(0xff404080), // 激活进度条颜色(滑块左边的)
              thumbColor: Colors.blue, // 未激活进度条的颜色(滑块右边的)
              overlayColor: Colors.green, // 激活滑块，悬浮的颜色
              valueIndicatorColor: Colors.purpleAccent // 显示滑块值的颜色
            ),
            child: Slider(
              label:'$_sliderNum',
              divisions: 4,
              value: _sliderNum, 
              onChanged: (value) {
                setState(() {
                  _sliderNum = value;
                });
              }
            )
          ),
          
        ],
      ),
    );
  }

}

截屏2021-01-10 下午1.05.17.png