Flutter中setState触发整屏重绘，如何仅重绘SfSlider？

你可以通过以下两种方式避免整屏重绘，只让SfSlider相关区域更新：

方法一：将SfSlider封装为独立的StatefulWidget #

把滑块的逻辑抽离成单独的StatefulWidget，这样调用setState时只会触发这个子组件的build，不会影响父组件和其他页面元素。

示例代码：

class PictureQualitySlider extends StatefulWidget {
  final int initialValue;
  final Function(int) onValueChanged;

  const PictureQualitySlider({
    Key? key,
    required this.initialValue,
    required this.onValueChanged,
  }) : super(key: key);

  @override
  State<PictureQualitySlider> createState() => _PictureQualitySliderState();
}

class _PictureQualitySliderState extends State<PictureQualitySlider> {
  late int _pictureQuality;

  @override
  void initState() {
    super.initState();
    _pictureQuality = widget.initialValue;
  }

  @override
  Widget build(BuildContext context) {
    return SfSlider(
      minorTicksPerInterval: 0,
      inactiveColor: Colors.grey[300],
      tooltipShape: const SfPaddleTooltipShape(),
      activeColor: _pictureQuality < 500 
          ? Colors.deepOrange 
          : (_pictureQuality > 500 && _pictureQuality < 800)
              ? Colors.green 
              : Colors.deepOrange,
      edgeLabelPlacement: EdgeLabelPlacement.auto,
      showLabels: true,
      showTicks: true,
      enableTooltip: true,
      stepSize: 10,
      showDividers: true,
      interval: 10.0,
      shouldAlwaysShowTooltip: false,
      min: 50.0,
      max: 120.0,
      value: _pictureQuality / 10,
      onChanged: (value) {
        setState(() {
          _pictureQuality = value.toInt() * 10;
        });
        widget.onValueChanged(_pictureQuality);
      },
    );
  }
}

在父组件中使用这个滑块：

PictureQualitySlider(
  initialValue: 500, // 初始值
  onValueChanged: (value) {
    // 在这里处理滑块值变化后的逻辑，不需要调用父组件的setState
  },
)

方法二：使用ValueNotifier + ValueListenableBuilder #

用ValueNotifier来管理滑块的状态，配合ValueListenableBuilder包裹SfSlider，这样只有ValueListenableBuilder内部的内容会在值变化时重绘，父组件不会触发build。

示例代码：

// 在父组件中定义ValueNotifier
final ValueNotifier<int> _pictureQualityNotifier = ValueNotifier(500);

// 构建滑块部分
ValueListenableBuilder<int>(
  valueListenable: _pictureQualityNotifier,
  builder: (context, value, child) {
    return SfSlider(
      minorTicksPerInterval: 0,
      inactiveColor: Colors.grey[300],
      tooltipShape: const SfPaddleTooltipShape(),
      activeColor: value < 500 
          ? Colors.deepOrange 
          : (value > 500 && value < 800)
              ? Colors.green 
              : Colors.deepOrange,
      edgeLabelPlacement: EdgeLabelPlacement.auto,
      showLabels: true,
      showTicks: true,
      enableTooltip: true,
      stepSize: 10,
      showDividers: true,
      interval: 10.0,
      shouldAlwaysShowTooltip: false,
      min: 50.0,
      max: 120.0,
      value: value / 10,
      onChanged: (newValue) {
        _pictureQualityNotifier.value = newValue.toInt() * 10;
      },
    );
  },
)

这两种方法都能有效避免整屏重绘，你可以根据自己的代码结构选择合适的方式。

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