Flutter: управление состоянием нескольких элементов в виде списка с помощью ChangeNotifierProvider - PullRequest
Новая
       41

Flutter: управление состоянием нескольких элементов в виде списка с помощью ChangeNotifierProvider

0 голосов
/ 26 апреля 2020

в моем приложении Flutter

Я хочу отобразить несколько элементов внутри listView

и хочу обработать их состояние с помощью Provider.

, но как мне справиться с указать, что если я отредактирую один элемент в просмотре списка, будет восстановлен только этот элемент.

и весь просмотр списка будет восстановлен только при изменении количества элементов путем добавления или удаления.

как я могу это сделать

1 Ответ

0 голосов
/ 26 апреля 2020

Это рабочее решение, которое очень близко к тому, что вы хотите (оно все равно восстанавливает целое 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
            },
          ),
        ),
      ),
    );
  }
}
...