Dart中向数组添加对象后Flutter UI未更新，如何解决？

1. StatelessWidget 不支持状态更新：CounterCard 是 StatelessWidget，它的 build 方法仅在组件初始化或父组件重建时执行。修改 counter.counts 时，Flutter 框架无法感知变化，不会触发 UI 重新渲染。
2. 普通类无状态通知机制：Counter 是普通 Dart 类，没有内置状态变更通知能力，修改其属性无法触发 UI 更新。
3. 初始化隐患：Counter 构造函数默认参数用了 const []，这是不可变列表，直接调用 add 会抛出异常（当前未报错应该是实例化时传入了可变列表，但该写法存在风险）。

将 CounterCard 改为 StatefulWidget，修改数据后调用 setState 触发 UI 重建，同时修复 Counter 的初始化问题：

class Counter {
  String label;
  List<Count> counts; // 明确类型，避免动态类型隐患

  // 用可变列表作为默认值，避免不可变列表add报错问题
  Counter({required this.label, List<Count>? counts}) 
      : counts = counts ?? [];
}

class Count {
  double latitude;
  double longitude;
  DateTime date;

  Count({required this.latitude, required this.longitude, required this.date});
}

// 改为StatefulWidget
class CounterCard extends StatefulWidget {
  final Counter counter;

  const CounterCard({super.key, required this.counter});

  @override
  State<CounterCard> createState() => _CounterCardState();
}

class _CounterCardState extends State<CounterCard> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text('${widget.counter.label}'),
        Text('${widget.counter.counts.length}'),
        IconButton.filled(
          onPressed: onPressed,
          icon: const Icon(Icons.add_circle)
        )
      ],
    );
  }

  void onPressed() {
    print('Add count');
    // 修改数据后调用setState，通知框架重建UI
    setState(() {
      widget.counter.counts.add(Count(
        latitude: 0.0,
        longitude: 0.0,
        date: DateTime.now()
      ));
    });
  }
}

如果后续需要在多个组件中共享 Counter 状态，推荐使用 ChangeNotifier 实现状态通知：

import 'package:flutter/foundation.dart';

class Counter extends ChangeNotifier {
  String label;
  List<Count> counts;

  Counter({required this.label, List<Count>? counts}) 
      : counts = counts ?? [];

  // 封装添加方法，内部调用notifyListeners通知状态变更
  void addCount(Count count) {
    counts.add(count);
    notifyListeners();
  }
}

class Count {
  double latitude;
  double longitude;
  DateTime date;

  Count({required this.latitude, required this.longitude, required this.date});
}

class CounterCard extends StatelessWidget {
  final Counter counter;

  const CounterCard({super.key, required this.counter});

  @override
  Widget build(BuildContext context) {
    // 使用Consumer监听Counter的状态变化，自动重建UI
    return Consumer<Counter>(
      builder: (context, counter, child) {
        return Row(
          children: [
            Text('${counter.label}'),
            Text('${counter.counts.length}'),
            IconButton.filled(
              onPressed: () => counter.addCount(Count(
                latitude: 0.0,
                longitude: 0.0,
                date: DateTime.now()
              )),
              icon: const Icon(Icons.add_circle)
            )
          ],
        );
      },
    );
  }
}

注意：使用 ChangeNotifier 时，需在父组件中用 ChangeNotifierProvider 提供 Counter 实例，示例：

ChangeNotifierProvider(
  create: (context) => Counter(label: '测试'),
  child: const CounterCard(),
)

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