ByteNoteByteNote
字

字节笔记本

2026年2月22日

Flutter Slider 滑动条组件详解

#Flutter 专栏

本文详细介绍 Flutter 中 Slider、RangeSlider 和 CupertinoSlider 三种滑动条组件的使用方法，包括基础用法、参数配置、样式自定义等，帮助开发者快速掌握这些常用的 UI 控件。

Slider（滑动条）

Slider 可以快速的从一系列值中做出选择，常用于音量调节、亮度设置、进度控制等场景。

基础用法

Slider 需要设置 value 和 onChanged 两个必传参数：

dart
double _sliderValue = 0;

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

注意：如果不设置 onChanged 属性，Slider 控件将处于禁用状态，无法滑动。Slider 本身没有内置的滑动动画效果，需要通过 onChanged 回调动态改变 value 的值来实现交互。

常用属性

属性类型说明
valuedouble当前值（必传）
onChangedValueChanged值变化回调（必传）
mindouble最小值，默认 0
maxdouble最大值，默认 1
divisionsint分割段数，用于离散值选择
labelString滑动时显示的标签
activeColorColor已激活部分的颜色
inactiveColorColor未激活部分的颜色
onChangeStartValueChanged开始滑动时的回调
onChangeEndValueChanged结束滑动时的回调

完整示例

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

class _SliderDemoState extends State<SliderDemo> {
  double _value = 20.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Slider 示例')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('当前值：${_value.toStringAsFixed(1)}'),
            Slider(
              value: _value,
              min: 20.0,
              max: 330.0,
              divisions: 5,
              label: '${_value.toStringAsFixed(1)} 元',
              activeColor: Colors.blue,
              inactiveColor: Colors.grey[300],
              onChanged: (newValue) {
                setState(() {
                  _value = newValue;
                });
              },
              onChangeStart: (startValue) {
                print('开始滑动: $startValue');
              },
              onChangeEnd: (endValue) {
                print('结束滑动: $endValue');
              },
            ),
          ],
        ),
      ),
    );
  }
}

使用 SliderTheme 自定义样式

通过 SliderTheme 可以实现更精细的样式控制：

dart
SliderTheme(
  data: SliderTheme.of(context).copyWith(
    activeTrackColor: Color(0xff404080),
    inactiveTrackColor: Colors.grey[300],
    thumbColor: Colors.blue,
    overlayColor: Colors.green.withOpacity(0.3),
    valueIndicatorColor: Colors.purpleAccent,
    showValueIndicator: ShowValueIndicator.always,
  ),
  child: Slider(
    value: _sliderValue,
    min: 0,
    max: 100,
    divisions: 4,
    label: '$_sliderValue',
    onChanged: (v) {
      setState(() {
        _sliderValue = v;
      });
    },
  ),
)

RangeSlider（区间滑动条）

RangeSlider 用于选择一个数值范围，适用于价格区间、时间范围等场景。

基础用法

dart
RangeValues _rangeValues = RangeValues(40, 80);

RangeSlider(
  values: _rangeValues,
  min: 0,
  max: 100,
  divisions: 10,
  labels: RangeLabels(
    '开始：${_rangeValues.start.toStringAsFixed(0)}',
    '结束：${_rangeValues.end.toStringAsFixed(0)}',
  ),
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    });
  },
)

自定义样式

dart
RangeSlider(
  values: _rangeValues,
  min: 0,
  max: 100,
  divisions: 10,
  activeColor: Colors.orange,
  inactiveColor: Colors.grey,
  labels: RangeLabels(
    '${_rangeValues.start.toStringAsFixed(0)}%',
    '${_rangeValues.end.toStringAsFixed(0)}%',
  ),
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    }),
  },
)

CupertinoSlider（iOS 风格滑动条）

CupertinoSlider 提供了 iOS 风格的滑动条外观，适合需要与 iOS 设计风格保持一致的场景。

基础用法

dart
CupertinoSlider(
  value: _sliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  activeColor: Colors.purple,
  thumbColor: Colors.cyan,
  onChanged: (value) {
    setState(() {
      _sliderValue = value;
    });
  },
)

自适应平台样式

Flutter 还提供了自适应的 Slider，会根据平台自动选择 Material 或 Cupertino 样式：

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

版本更新说明

Flutter 1.20 版本对 Slider 进行了视觉更新：

  • 轨道（track）变得更粗
  • 滑块（thumb）采用 3D 风格并带有阴影效果
  • 整体视觉效果更加现代

总结

组件适用场景特点
Slider单值选择Material 设计，高度可定制
RangeSlider范围选择双滑块，适合区间设置
CupertinoSlideriOS 风格应用与 iOS 设计一致

选择合适的滑动条组件，可以为用户提供直观、流畅的数值输入体验。

Flutter 专栏
上一篇

npm 依赖冲突解决指南：5种处理方式

下一篇

Flutter Slider 滑动条组件详解

分享: