Flutter中setState无法更新动态新增列表项UI的问题

看起来你遇到的问题是动态添加的AperturaWrapper项无法同步更新UI，只有热重载后才显示最新数据，而初始项能正常更新。核心原因在于：

• 初始项的AperturaWidget直接从父组件的widget.orari[0]获取值，父组件调用setState时会重新构建这个AperturaWidget，所以能拿到最新数据。
• 动态添加的AperturaWrapper是StatefulWidget，它依赖的widget.orario是一个对象引用。当你在_selectTimeApertura里修改orario.apertura时，只是修改了对象的属性，但AperturaWrapper的State并没有感知到这个变化，因此不会触发自身的build方法，UI也就不会更新。

解决方案：让Orario具备状态通知能力 #

最优雅的方式是把Orario改成ChangeNotifier，这样当它的属性变化时，能通知监听它的Widget更新UI。

步骤1：改造Orario类 #

import 'package:flutter/foundation.dart';

class Orario extends ChangeNotifier {
  String apertura = '';
  String chiusura = '';

  // 更新开门时间并通知监听者
  void setApertura(String newTime) {
    apertura = newTime;
    notifyListeners();
  }

  // 更新关门时间并通知监听者
  void setChiusura(String newTime) {
    chiusura = newTime;
    notifyListeners();
  }
}

步骤2：让AperturaWrapper监听Orario的变化 #

修改_AperturaWrapperState，添加监听逻辑：

class _AperturaWrapperState extends State<AperturaWrapper> {
  @override
  void initState() {
    super.initState();
    // 监听Orario的变化，一旦变化就触发自身更新
    widget.orario.addListener(_refreshUI);
  }

  @override
  void dispose() {
    // 页面销毁时移除监听，避免内存泄漏
    widget.orario.removeListener(_refreshUI);
    super.dispose();
  }

  void _refreshUI() {
    setState(() {}); // 触发build，更新UI
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          child: AperturaWidget(
            onTapApertura: widget.onTapApertura,
            onTapChiusura: widget.onTapChiusura,
            valoreApertura: widget.orario.apertura,
            valoreChiusura: widget.orario.chiusura,
          ),
        ),
        IconButton(
          onPressed: widget.onRemove,
          icon: const Icon(Icons.remove),
        ),
      ],
    );
  }
}

步骤3：修改父组件的时间选择逻辑 #

在_selectTimeApertura和_selectTimeChiusura中，使用新的方法更新Orario的属性：

Future _selectTimeApertura(BuildContext context, {int i = 0}) async {
  final TimeOfDay? _pickedTime = await showTimePicker(context: context, initialTime: TimeOfDay.now());
  if (_pickedTime != null) {
    final timeStr = '${_pickedTime.hour}:${_pickedTime.minute}';
    setState(() {
      // 使用setApertura方法触发通知
      widget.orari[i].setApertura(timeStr);
      if (i > 0) {
        aperture[i - 1].orario.setApertura(timeStr);
      }
    });
  }
}

// 同理修改_selectTimeChiusura方法
Future _selectTimeChiusura(BuildContext context, {int i = 0}) async {
  final TimeOfDay? _pickedTime = await showTimePicker(context: context, initialTime: TimeOfDay.now());
  if (_pickedTime != null) {
    final timeStr = '${_pickedTime.hour}:${_pickedTime.minute}';
    setState(() {
      widget.orari[i].setChiusura(timeStr);
      if (i > 0) {
        aperture[i - 1].orario.setChiusura(timeStr);
      }
    });
  }
}

为什么热重载后能显示？ #

热重载会重新构建所有Widget的build方法，此时AperturaWrapper会读取Orario的最新属性值，所以UI能更新。但正常运行时没有这个触发机制，所以需要通过ChangeNotifier来主动通知更新。

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