如何更新待办事项？

Question

单击todo项时，将打开一个编辑窗口，用户可以在该窗口中进行更改并保存它们。我用ChangeNotifier编写了一个更新函数，但是当我单击保存时，会弹出一个错误:这是因为您使用的'BuildCOntext‘不包括您选择的提供者。但是提供程序中的其余代码可以工作。只有update函数不能工作。有什么问题吗？我的ChangeNotifier：

​

class ListModel extends ChangeNotifier {
  List<EventModel> eventList = [];

  void addEventToList() {
    EventModel eventModel = EventModel(
      title: 'Event title ${eventList.length + 1}',
      detail: 'Event text ${eventList.length + 1}',
      id: '${eventList.length + 1}',
    );
    eventList.add(eventModel);

    notifyListeners();
  }

  EventModel? getEvent(String? id) {
    return eventList.firstOrNullWhere((event) => event.id == id);
  }

  void updateList(EventModel eventModel, String title, String detail) {
    eventModel.title = title;
    eventModel.detail = detail;

    notifyListeners();
  }
}

​

我的模态窗：

​

class EditEventBottomSheet extends StatefulWidget {
  final EventModel event;

  const EditEventBottomSheet({Key? key, required this.event}) : super(key: key);

  @override
  State<EditEventBottomSheet> createState() => _EditEventBottomSheetState();
}

class _EditEventBottomSheetState extends State<EditEventBottomSheet> {
  late final titleCntrl = TextEditingController(text: widget.event.title);
  late final detailCntrl = TextEditingController(text: widget.event.detail);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      color: Colors.amber,
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                'Change Event',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 10),
              TextField(
                controller: titleCntrl,
              ),
              const SizedBox(height: 10),
              TextFormField(
                controller: detailCntrl,
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                child: const Text('Save Edits'),
                onPressed: () {
                  Provider.of<ListModel>(context, listen: false).updateList(
                      widget.event, titleCntrl.text, detailCntrl.text);
                  // widget.event.title = titleCntrl.text;
                  Navigator.pop(context);
                },
              ),
              ElevatedButton(
                child: const Text('Close BottomSheet'),
                onPressed: () => Navigator.pop(context),
              )
            ],
          ),
        ),
      ),
    );
  }
}

​

我的main.dart：

​

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChangeNotifierProvider(
        create: (BuildContext context) => ListModel(),
        child: const HomeScreen(),
      ),
    );
  }
}

​

Answer 1

好的，如果你在家里设置你的ChangeNotifierProvider，只有他的孩子( HomeScreen)会得到ListModel()，这就是为什么在你的EditEventBottomSheet中BuildContext找不到提供者，但是如果你想在另一个类Widget中使用它，你必须在EditEventBottomSheet中“重新创建”另一个ChangeNotifierProvider，就像这样：(你不创建另一个ListModel，你只把已经创建的一个ChangeNotifierProvider)

ChangeNotifierProvider.value(
  value: ListModel(),
  child: EditEventBottomSheet(),
)

但是不要担心这一点，因为我建议您将提供者放在全球，也就是说，ALL您的应用程序可以访问它，以及如何访问它？好吧，不是在你的身体里创建它，而是在你的MaterialApp中创建它。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider( // something like this
      create: (BuildContext context) => ListModel(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const HomeScreen(),
      ),
    );  
  }
}