Flutter：如何从Modal BottomSheet修改数据后刷新父Widget

核心问题在于独立StatefulWidget的状态隔离和Modal BottomSheet重建导致状态丢失的矛盾，以下是具体解决方法：

1. 给depense组件传递初始值与更新回调 #

将父组件的_currentValue作为初始值传入depense，同时提供一个回调函数，让depense在NumberPicker值变化时通知父组件更新状态。这样既保证父组件UI同步，又让depense能基于父组件的最新值初始化，避免重置。

父组件代码 #

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  int _currentValue = 0;

  // 接收子组件传来的新值，更新父组件状态
  void _onValueUpdated(int newValue) {
    setState(() {
      _currentValue = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("当前值：${_currentValue}"),
      ),
      floatingActionButton: RaisedButton(
        child: Text("打开底部弹窗"),
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (_) {
              // 传入当前值和更新回调
              return Depense(
                initialValue: _currentValue,
                onValueChanged: _onValueUpdated,
              );
            },
          );
        },
      ),
    );
  }
}

独立的depense组件代码 #

class Depense extends StatefulWidget {
  final int initialValue;
  final ValueChanged<int> onValueChanged;

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

  @override
  _DepenseState createState() => _DepenseState();
}

class _DepenseState extends State<Depense> {
  late int _localValue;

  @override
  void initState() {
    super.initState();
    // 用父组件传来的初始值初始化本地状态
    _localValue = widget.initialValue;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20, horizontal: 16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          NumberPicker(
            value: _localValue,
            minValue: 0,
            maxValue: 100,
            onChanged: (newValue) {
              // 更新本地状态，保证NumberPicker自身UI刷新
              setState(() {
                _localValue = newValue;
              });
              // 通知父组件更新状态
              widget.onValueChanged(newValue);
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            child: Text("确认"),
            onPressed: () => Navigator.pop(context),
          )
        ],
      ),
    );
  }
}

2. 为什么这样能解决问题 #

• 避免NumberPicker重置：每次打开Modal BottomSheet时，depense会用父组件当前的_currentValue初始化本地的_localValue，所以NumberPicker会显示最新值，不会回到初始状态。
• 父组件UI同步：NumberPicker值变化时，通过回调触发父组件的setState，让父组件的Text控件实时更新。
• 代码复用：depense作为独立组件可以在多个地方复用，同时保持状态同步的逻辑清晰。

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