Flutter如何在同一条滑动条上添加多个滑块并获取各滑块数值

方案1：使用第三方插件（推荐） #

现有成熟插件已经完全支持多滑块配置，无需自行处理拖拽、数值计算逻辑，可直接自定义滑块样式为方形，同步获取各滑块数值。

• 第一步：在pubspec.yaml中添加flutter_multi_slider依赖

dependencies:
  flutter:
    sdk: flutter
  flutter_multi_slider: ^最新版本号

• 第二步：页面逻辑实现示例

import 'package:flutter/material.dart';
import 'package:flutter_multi_slider/flutter_multi_slider.dart';

class MultiSliderDemo extends StatefulWidget {
  const MultiSliderDemo({super.key});

  @override
  State<MultiSliderDemo> createState() => _MultiSliderDemoState();
}

class _MultiSliderDemoState extends State<MultiSliderDemo> {
  // 按从左到右顺序存储三个滑块的数值，初始值可自行调整
  List<double> _values = [10, 40, 75];
  final double _min = 0;
  final double _max = 100;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 展示当前三个滑块的数值
        Text('滑块1：${_values[0].toStringAsFixed(1)} 滑块2：${_values[1].toStringAsFixed(1)} 滑块3：${_values[2].toStringAsFixed(1)}'),
        const SizedBox(height: 20),
        MultiSlider(
          min: _min,
          max: _max,
          values: _values,
          // 滑块数值变化时实时更新
          onChanged: (newValues) {
            setState(() {
              _values = newValues;
            });
          },
          // 自定义滑块为方形
          thumb: Container(
            width: 20,
            height: 20,
            decoration: const BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.zero,
              boxShadow: [
                BoxShadow(color: Colors.black12, blurRadius: 3, spreadRadius: 1)
              ]
            ),
          ),
          // 自定义轨道样式
          track: const SliderTrack(
            trackHeight: 4,
            activeTrackColor: Colors.blueAccent,
            inactiveTrackColor: Colors.grey,
          ),
        ),
      ],
    );
  }
}

你可以根据需求调整滑块、轨道的样式，也可以配置是否允许滑块之间交叉重叠。

方案2：自定义绘制实现 #

如果需要完全自定义交互逻辑，可以通过CustomPaint + GestureDetector自行实现，核心逻辑如下：

• 用Canvas绘制底部轨道、选中段轨道、三个方形滑块
• 计算每个滑块的显示坐标：滑块X坐标 = 轨道左侧X偏移 + (当前滑块值 / (_max - _min)) * 轨道总宽度
• 监听手势拖拽事件，判断当前拖拽的是哪个滑块：触摸点坐标与各个滑块坐标的距离小于阈值，即可判定为选中该滑块
• 拖拽过程中实时更新对应滑块的数值，限制数值范围在_min到_max之间，按需添加滑块不交叉的判断逻辑
• 重绘组件更新UI
  自定义实现自由度更高，但需要自行处理横竖屏适配、边界判定等细节，没有特殊需求优先使用第三方插件即可。

内容的提问来源于stack exchange，提问作者Suthura Sudharaka