Flutter中Provider绑定同层级Widget与全局Model失效，求答疑

问题核心原因 #

你的代码存在两个关键问题导致UI无法同步：

1. 未监听Model数据变化：使用context.read<Model>()仅能一次性获取模型实例，不会监听notifyListeners()触发的更新，因此Model数据改变时Widget不会重建，Slider和TextField自然无法同步。
2. TextField控制器未与Model绑定：TextEditingController的内容没有和Model的suffix值关联，导致Model更新时TextField文本不会自动变化，同时输入操作也无法双向同步到控制器。

修正后的代码实现 #

1. 调整NumberEntry的State逻辑

class NumberEntry extends StatefulWidget {
  const NumberEntry({Key? key}) : super(key: key);

  @override
  State<NumberEntry> createState() => _NumberEntryState();
}

class _NumberEntryState extends State<NumberEntry> {
  final _controller = TextEditingController();
  late Model _model;

  @override
  void initState() {
    super.initState();
    // 初始化时同步Model数据到控制器
    _model = context.read<Model>();
    _controller.text = _model.suffix.toString();
    
    // 监听控制器输入，同步到Model（替代onChanged）
    _controller.addListener(() {
      final inputText = _controller.text;
      if (inputText.isNotEmpty) {
        final inputValue = int.parse(inputText);
        if (inputValue != _model.suffix) {
          _model.setSuffix(inputValue);
        }
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    // 用watch监听Model变化，数据更新时自动重建Widget
    _model = context.watch<Model>();
    
    // 同步Model数据到控制器（解决Slider修改后TextField不更新的问题）
    if (_controller.text != _model.suffix.toString()) {
      _controller.text = _model.suffix.toString();
    }

    return Row(
      children: [
        const Padding(
          padding: EdgeInsets.all(4.0),
          child: Text('Suffix'),
        ),
        SizedBox(
          width: 50,
          child: TextField(
            controller: _controller,
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(2.0),
          child: SizedBox(
            width: 100,
            child: Slider(
              min: 0,
              max: 100,
              value: _model.suffix.toDouble(),
              onChanged: (input) {
                _model.setSuffix(input.toInt());
              },
            ),
          ),
        ),
      ],
    );
  }
}

2. Model代码保持不变

class Model extends ModelBase with ChangeNotifier, DiagnosticableTreeMixin {
  int suffix = 0;

  void setSuffix(int sx) {
    suffix = sx;
    notifyListeners();
  }
}

关于数据冗余的说明 #

你之前的临时方案出现数据冗余，是因为没有正确利用Provider的状态管理机制。正确的设计应该是：

• 唯一数据源：仅在Model中保留suffix的唯一副本
• UI层无本地状态：通过context.watch或Consumer监听Model变化，自动更新UI
• 控制器仅做交互桥梁：TextField的Controller只负责同步Model数据和用户输入，不需要额外存储状态

这种方式完全不需要setState()，也不会产生数据冗余。

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