Flutter模型编辑器插件 model_editors 的使用

model_editors 是一个用于复杂模型和列表的控制器与编辑器的Flutter插件。它受到TextEditingController简单性的启发，封装了状态管理，使您不必手动调用setState(){}。

功能介绍

控制器

• AbstractListEditingController：这是一个ValueNotifier<List<T?>>，负责添加、删除和重新排序列表项。
• CheckboxGroupEditingController：这是一个ValueNotifier<List<T>>，用于根据用户操作存储多个值。

小部件

• ColumnListEditor：显示单个编辑器并允许删除它们。
• ReorderableListViewEditor：除了允许删除外，还支持重新排序。
• MaterialCheckboxColumn：以列的形式显示复选框组。

示例代码

以下是一个完整的示例演示如何使用model_editors来创建一个书籍编辑器：

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

enum BookFormat {
  hard,
  paper,
}

class Book {
  final String title;
  final String author;
  final List<BookFormat> formats;

  Book({
    required this.title,
    required this.author,
    required this.formats,
  });
}

class BookEditingController extends ValueNotifier<Book?> {
  final titleController = TextEditingController();
  final authorController = TextEditingController();
  final formatsController = CheckboxGroupEditingController<BookFormat>();

  BookEditingController() : super(null);

  @override
  set value(Book? book) {
    if (book == null) {
      titleController.text = '';
      authorController.text = '';
      formatsController.value = [];
    } else {
      titleController.text = book.title;
      authorController.text = book.author;
      formatsController.value = book.formats;
    }
    notifyListeners();
  }

  @override
  Book? get value {
    final title = titleController.text.trim();
    final author = authorController.text.trim();

    if (title == '' || author == '') return null;

    return Book(
      title: title,
      author: author,
      formats: formatsController.value,
    );
  }

  @override
  void dispose() {
    Future.delayed(const Duration(seconds: 2), _disposeNow);
    super.dispose();
  }

  void _disposeNow() {
    titleController.dispose();
    authorController.dispose();
    formatsController.dispose();
  }
}

class BookListEditingController extends ListEditingController<Book, BookEditingController> {
  BookListEditingController()
      : super(
          minLength: 1,
          maxLength: 3,
          createItemController: BookEditingController.new,
        );
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "model_editors Example",
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _listController = BookListEditingController();

  @override
  void initState() {
    super.initState();
    _listController.value = [
      Book(
        title: "Speak, Memory",
        author: "Vladimir Nabokov",
        formats: [BookFormat.hard],
      ),
      Book(
        title: "The Power of Now",
        author: "Eckhart Tolle",
        formats: [BookFormat.paper],
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              ReorderableListEditor<Book, BookEditingController>(
                controller: _listController,
                itemBuilder: (context, itemController, index) =>
                    BookEditor(controller: itemController),
                shrinkWrap: true,
                spacing: 20,
              ),
              CollectionAddButtonBuilder(
                controller: _listController,
                enabledBuilder: (context) {
                  return IconButton(
                    icon: const Icon(Icons.add),
                    onPressed: () => _listController.add(null),
                  );
                },
              ),
              ElevatedButton(
                child: const Text("Save"),
                onPressed: _onSavePressed,
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onSavePressed() {
    final items = _listController.nonNullValues;
    print("Got ${items.length} non-empty books.");
  }

  @override
  void dispose() {
    _listController.dispose();
    super.dispose();
  }
}

class BookEditor extends StatelessWidget {
  final BookEditingController controller;

  BookEditor({
    required this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextField(
          decoration: const InputDecoration(labelText: "Title"),
          controller: controller.titleController,
        ),
        TextField(
          decoration: const InputDecoration(labelText: "Author"),
          controller: controller.authorController,
        ),
        MaterialCheckboxColumn<BookFormat>(
          controller: controller.formatsController,
          allValues: BookFormat.values,
          labels: const {
            BookFormat.hard: "Hard Cover",
            BookFormat.paper: "Paperback",
          },
        ),
      ],
    );
  }
}

总结

通过上述示例，您可以轻松地在Flutter应用中集成复杂的模型编辑功能。此插件提供了灵活且强大的工具，帮助开发者简化状态管理和UI构建。希望这个示例能帮助您快速上手并应用到您的项目中。