flutter中，有一个集合，改变集合对象的某一个属性后，为什么列表未更新?

Question

有一个List<Goods>，Goods只有两个属性，一个isCollection表示是否收藏，一个goodsName表示名称。

业务场景是，前端有一个List<Goods>是配置好的，只是商品的isCollection是否收藏需要通过后端接口返回，我在initState()里面调用api接口，在接口中修改某一行的isCollection但是页面没有刷新，请问怎么回事？

代码如下：

/// 商品类
class Goods {
  Goods(this.isCollection, this.goodsName);
  bool isCollection;
  String goodsName;
}

/// 需要提供状态管理的对象
class GoodsListProvider with ChangeNotifier {
  final List<Goods> _goodsList = List.generate(
    10,
    (index) => Goods(false, 'Goods No. $index'),
  );

  get goodsList => _goodsList;
  get total => _goodsList.length;
    
  /// 修改商品的 isCollection 属性；
  collect(int index) {
    var goods = _goodsList[index];
    _goodsList[index] = Goods(!goods.isCollection, goods.goodsName);
    notifyListeners();
  }
}

/// 页面组件
class GoodsListScreen extends StatefulWidget {
  const GoodsListScreen({super.key});

  @override
  State<GoodsListScreen> createState() => _GoodsListScreenState();
}

class _GoodsListScreenState extends State<GoodsListScreen> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => GoodsListProvider(), // 需要共享的数据资源
      child: Scaffold(
        appBar: AppBar(title: Text('Selector demo 页面')),
        body: Center(child: ListPage()),
      ),
    );
  }
}

class ListPage extends StatefulWidget {
  const ListPage({super.key});

  @override
  State<ListPage> createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    
    /// 调用api接口
    Future.microtask(() {
      getSideBarSummary();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Selector<GoodsListProvider, List<Goods>>(
      selector: (context, provider) => provider.goodsList,
      builder: (context, list, child) {
        return Column(
          children:
              list
                  .map(
                    (item) => Row(
                      children: [
                        Text(item.goodsName),
                        Icon(
                          item.isCollection ? Icons.star : Icons.star_border,
                        ),
                      ],
                    ),
                  )
                  .toList(),
        );
      },
    );
  }
  
  /// api接口，延迟2s，模拟修改数据
  Future<void> getSideBarSummary() async {
    /// 请求api接口，更新统计数据
    try {
      // 模拟网络延迟
      await Future.delayed(Duration(seconds: 2));

      if (!mounted) return;

      print(111);
      Provider.of<GoodsListProvider>(context, listen: false).collect(2);
      print(111222);
    } catch (e) {
      print('Error in mock network data: $e');
    }
  }
}

Answer 1

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => GoodsListProvider(),
      child: MaterialApp(
        home: GoodsListScreen(),
      ),
    );
  }
}

// GoodsListScreen不再创建Provider
class GoodsListScreen extends StatefulWidget {
  @override
  State<GoodsListScreen> createState() => _GoodsListScreenState();
}

class _GoodsListScreenState extends State<GoodsListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Selector demo 页面')),
      body: Center(child: ListPage()),
    );
  }
}

或者：

collect(int index) {
  _goodsList[index].isCollection = !_goodsList[index].isCollection;
  notifyListeners();
}