listview - Flutter:使用 ChangeNotifierProvider 管理 ListView 中多个项目的状态

Question

在我的 Flutter 应用中，

我想在 listView 中显示多个项目，

我想使用 Provider 处理它们的状态。

但是如果我在 ListView 中编辑一个项目，那么我该如何处理状态呢？只有那个项目得到重建，

只有当我通过添加或删除更改项目数时，整个 ListView 才会重建。

我该怎么做？

Answer 1

这是一个非常接近您想要的工作解决方案(它仍然会在编辑一个项目时重建整个 ListView 但不用担心效率，因为 ListView.builder 会为您处理):

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class MyModel {
  int modelNumber;

  MyModel(this.modelNumber);

  void edit(int newModelNumber) {
    modelNumber = newModelNumber;
  }
}

class MyModelListWrapper with ChangeNotifier {
  List<MyModel> modelsList;

  MyModelListWrapper(this.modelsList);

  void add(MyModel model) {
    modelsList.add(model);
    notifyListeners();
  }

  void removeAt(int index) {
    modelsList.removeAt(index);
    notifyListeners();
  }

  void editModelNumber(int index,int newModelNumber){
    modelsList[index].edit(newModelNumber);
    notifyListeners();
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => MyModelListWrapper(
              [...List.generate(15, (index)=>MyModel(index))]),
        ),
      ],
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Consumer<MyModelListWrapper>(
        builder: (_,myModelsListWrapper,__)=> ListView.builder(
          itemCount: myModelsListWrapper.modelsList.length,
          itemBuilder: (ctx, index) => ListTile(
            title: Text('${myModelsListWrapper.modelsList[index].modelNumber}'),
            onTap: (){
//              myModelsListWrapper.editModelNumber(index, -1);
              myModelsListWrapper.removeAt(index);
              //or do any other action you want
            },
          ),
        ),
      ),
    );
  }
}