Flutter中用类创建Widget后NumberPicker setState失效的解决方法

你遇到的核心问题是状态管理不统一：要么子组件没把更新后的数值同步回父组件，要么子组件内部状态没和父组件传入的参数同步。下面给两种实用的解决方法：

方案1：受控组件模式（推荐） #

让父组件统一管理NumberPicker的数值状态，子组件只负责展示和触发更新回调。这种方式逻辑清晰，新手不容易踩坑。

父组件代码 #

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

class _ParentPageState extends State<ParentPage> {
  // 父组件维护数值状态
  int _pickerValue = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 把当前数值和更新回调传给子组件
        CustomNumberPicker(
          currentValue: _pickerValue,
          onValueChanged: (newValue) {
            setState(() {
              _pickerValue = newValue;
            });
          },
        ),
        SizedBox(height: 20),
        Text("当前选择值：$_pickerValue")
      ],
    );
  }
}

子组件代码（无状态） #

class CustomNumberPicker extends StatelessWidget {
  // 接收父组件传入的当前值和更新回调
  final int currentValue;
  final void Function(int) onValueChanged;

  const CustomNumberPicker({
    super.key,
    required this.currentValue,
    required this.onValueChanged,
  });

  @override
  Widget build(BuildContext context) {
    return NumberPicker(
      value: currentValue,
      minValue: 0,
      maxValue: 100,
      // 触发父组件的回调更新状态
      onChanged: onValueChanged,
    );
  }
}

方案2：子组件维护自身状态（需同步父组件参数） #

如果一定要让子组件自己管理状态，需要重写didUpdateWidget方法，当父组件传入的初始值变化时，同步更新子组件内部的状态。

子组件代码（有状态） #

class CustomNumberPicker extends StatefulWidget {
  final int initialValue;

  const CustomNumberPicker({
    super.key,
    required this.initialValue,
  });

  @override
  State<CustomNumberPicker> createState() => _CustomNumberPickerState();
}

class _CustomNumberPickerState extends State<CustomNumberPicker> {
  late int _currentValue;

  @override
  void initState() {
    super.initState();
    // 初始化时用父组件传入的值
    _currentValue = widget.initialValue;
  }

  // 关键：父组件更新参数时，同步更新内部状态
  @override
  void didUpdateWidget(CustomNumberPicker oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.initialValue != oldWidget.initialValue) {
      setState(() {
        _currentValue = widget.initialValue;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return NumberPicker(
      value: _currentValue,
      minValue: 0,
      maxValue: 100,
      onChanged: (newValue) {
        setState(() {
          _currentValue = newValue;
        });
      },
    );
  }
}

为什么之前的方法失效？ #

你之前的问题大概率是：子组件内部维护了_currentValue，但父组件重新传参时，子组件的initState只执行一次，不会自动更新内部状态；或者子组件更新后没把数值回调给父组件，导致父组件重新build时又把初始值传给子组件，看起来像是“回到初始值”。

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