Flutter Slider数值变化但滑块不实时移动问题修复

showModalBottomSheet 是独立的路由栈条目，其内部渲染的widget不属于外层_ReadingBookPage的子组件树范围。你在Slider的onChanged回调中调用的setState只会触发外层页面的重建，不会驱动底部弹窗内部的UI刷新，所以拖动时虽然_sizeFont变量已经更新，但滑块不会实时移动，只有下次重新唤起弹窗时，才会读取最新的变量值渲染滑块位置。

两种方案按需选择即可： #

方案1：用StatefulBuilder做局部刷新（改动量最小） #

不需要抽离新组件，直接在弹窗builder里嵌套StatefulBuilder，拿到弹窗作用域内的setState方法，拖动时同时刷新弹窗UI和外层页面状态即可。
替换原来的showModalBottomSheet调用逻辑：

GestureDetector(
  onTap: () {
    showModalBottomSheet(
      context: context,
      builder: (sheetContext) {
        // StatefulBuilder提供弹窗内部的刷新能力
        return StatefulBuilder(
          builder: (context, setSheetState) {
            return Container(
              // 原有其他布局配置保持不变
              child: Slider(
                value: _sizeFont,
                min: 0,
                max: 18,
                label: _sizeFont.round().toString(),
                activeColor: Colors.black,
                onChanged: (double value) {
                  // 刷新弹窗内的滑块位置
                  setSheetState(() => _sizeFont = value);
                  // 如果你需要正文的字体大小跟随拖动实时变化，加上这行刷新外层页面
                  setState(() {});
                },
              ),
            );
          },
        );
      },
    );
  },
  // 其他原有配置
)

方案2：抽离独立StatefulWidget（适合复杂弹窗） #

如果设置面板交互逻辑多，建议把弹窗内容抽成独立的StatefulWidget，自己管理内部状态，通过回调和外层页面通信，避免状态耦合：

1. 先定义独立的设置面板组件：

class FontSettingSheet extends StatefulWidget {
  final double defaultFontSize;
  final ValueChanged<double> onFontSizeUpdate;

  const FontSettingSheet({
    super.key,
    required this.defaultFontSize,
    required this.onFontSizeUpdate,
  });

  @override
  State<FontSettingSheet> createState() => _FontSettingSheetState();
}

class _FontSettingSheetState extends State<FontSettingSheet> {
  late double _fontSize;

  @override
  void initState() {
    super.initState();
    _fontSize = widget.defaultFontSize;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 原有其他布局配置保持不变
      child: Slider(
        value: _fontSize,
        min: 0,
        max: 18,
        label: _fontSize.round().toString(),
        activeColor: Colors.black,
        onChanged: (double value) {
          // 实时刷新滑块位置
          setState(() => _fontSize = value);
          // 通知外层页面更新正文字体
          widget.onFontSizeUpdate(value);
        },
      ),
    );
  }
}

2. 替换原来的showModalBottomSheet调用：

GestureDetector(
  onTap: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => FontSettingSheet(
        defaultFontSize: _sizeFont,
        onFontSizeUpdate: (newSize) {
          setState(() => _sizeFont = newSize);
        },
      ),
    );
  },
  // 其他原有配置
)

注意：不要直接把外层_getSettings()返回的widget直接作为showModalBottomSheet的child，这种写法下弹窗内的组件只会在首次打开时渲染一次，后续外层setState无法触发其更新。

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