Flutter中如何通过外部按钮修改Sleek_circular_Slider的滑块值与位置

实现核心是使用组件自带的CircularSliderController控制器进行值控制，具体步骤如下：

• 1. 将当前承载滑块的组件改造为StatefulWidget，声明控制器变量
• 2. 在initState生命周期中初始化控制器，dispose中销毁控制器避免内存泄漏
• 3. 给SleekCircularSlider绑定控制器属性
• 4. 外部按钮点击回调中直接调用控制器的setValue方法传入目标值即可同步更新滑块位置与取值

修改后的完整示例代码如下：

import 'package:sleek_circular_slider/sleek_circular_slider.dart';

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

  @override
  State<YourSliderPage> createState() => _YourSliderPageState();
}

class _YourSliderPageState extends State<YourSliderPage> {
  late CircularSliderController _sliderController;
  int slider_value = 4;

  @override
  void initState() {
    super.initState();
    // 初始化控制器，设置初始值和组件initialValue保持一致
    _sliderController = CircularSliderController(initialValue: 4);
  }

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

  Widget controlIndicator() {
    return SleekCircularSlider(
        min: 0,
        max: 100,
        initialValue: 4,
        // 绑定控制器
        controller: _sliderController,
        innerWidget: (value) {
          return sliderCenterWidget();
        },
        appearance: CircularSliderAppearance(
            spinnerMode: false,
            animationEnabled: true,
            size: 250,
            customColors: CustomSliderColors(
                dotColor: dark_grey,
                shadowColor: dark_grey,
                shadowMaxOpacity: 0.2,
                shadowStep: 5,
                progressBarColor: red,
                trackColor: grey),
            customWidths: CustomSliderWidths(
                trackWidth: 7, progressBarWidth: 12, handlerSize: 8)),
        onChange: (value) {
          slider_value = value.round();
          print(value);
        });
  }

  // 外部按钮示例
  Widget externalButton() {
    return ElevatedButton(
      onPressed: () {
        // 传入目标值即可，可自定义动画时长
        _sliderController.setValue(
          50,
          duration: const Duration(milliseconds: 300)
        );
      },
      child: const Text('修改滑块值为50')
    );
  }

  Widget sliderCenterWidget() {
    // 你的中心组件实现
    return Text('$slider_value');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          controlIndicator(),
          const SizedBox(height: 30),
          externalButton()
        ],
      ),
    );
  }
}

注意：不要通过修改initialValue后调用setState的方式更新值，该操作会触发滑块组件重建，性能损耗更高且动画效果会断层，使用控制器更新为官方推荐方案。

内容的提问来源于stack exchange，提问作者Andrea Bigini