如何保存已编辑的待办事项？

Question

对于应用程序，我创建了编辑待办事项的功能。项目有两个字段：标题和描述。当您单击一个项目时，它会打开一个模式，您可以在其中进行编辑。如何正确地将函数写入保存按钮，以便保存更改并显示它们？我的提供商：

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);
  }
}

我的模态 window:

class EditEventBottomSheet extends StatelessWidget {
  final EventModel event;

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

  @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),
              TextFormField(
                initialValue: event.title,
              ),
              const SizedBox(height: 10),
              TextFormField(
                initialValue: event.detail,
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                child: const Text('Save Edits'),
                onPressed: () {},
              ),
              ElevatedButton(
                child: const Text('Close BottomSheet'),
                onPressed: () => Navigator.pop(context),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

每个文本字段都应该有一个 EditingControllers，所以，在你的构建方法之前定义以下内容

late final titleController = TextEditingController(text: event.title);
late final detailController = TextEditingController(text: event.detail);

在你的构建方法中

final provider = Provider.of<ListModel>(context);


TextFormField(
    controller: titleController,
),
const SizedBox(height: 10),
TextFormField(
    controller: detailController,
),
const SizedBox(height: 10),
ElevatedButton(
    child: const Text('Save Edits'),
    onPressed: () {
        provider.editTodoItem(event.id, titleController.text, detailController.text);
    },
),

你的 editTodoItem 应该是这样的：

void editTodoItem(final String id, final String title, final String details){
    //Add a validation if you want, for example title & details must not be empty
    if(valid){
        final indexOfOld = eventList.map((e) => e.id).toList().indexOf(id);
        if (indexOfOld == -1) return;
        eventList.removeAt(indexOfOld);
        eventList.insert(indexOfOld, EventModel(
            title: title,
            detail: details,
            id: '$indexOfOld',
        ));
        notifyListeners();
    }
}

这是一种编辑方式，（替换对象）此外，除了 删除对象 并使用新值创建一个新对象并将其插入旧的索引之外，您还可以执行以下操作

if(valid){
    final event = eventList.firstWhere((e) => e.id == id);
    event.title = title;
    event.detail = details;
    notifyListeners();
}

不过老实说，第二种方式可能更新不了你的UI，好久没用providers了希望这个回答对您有所帮助。

如何保存已编辑的待办事项？

How to save edited todo item?

flutter

dart

flutter-provider