Flutter Bloc模式下Equatable实体在编辑场景中的使用困惑

核心思路很简单：把不可变的Equatable实体和可变的表单模型拆分开，各司其职——Equatable实体负责Bloc状态的存储与对比，表单模型专门处理编辑页的TextField绑定，提交时再互相转换。

1. 拆分实体与表单模型 #

首先保留你原来的AccountInformation实体，它继承Equatable，属性全为final，用于Bloc状态管理：

class AccountInformation extends Equatable {
  final String id;
  final String name;
  final String email;

  const AccountInformation({
    required this.id,
    required this.name,
    required this.email,
  });

  // 新增转表单模型的方法
  AccountInformationForm toForm() {
    return AccountInformationForm(
      id: id,
      name: name,
      email: email,
    );
  }

  @override
  List<Object?> get props => [id, name, email];
}

然后新建一个专门的表单模型类，属性不带final，支持修改：

class AccountInformationForm {
  String id;
  String name;
  String email;

  AccountInformationForm({
    required this.id,
    required this.name,
    required this.email,
  });

  // 新增转Equatable实体的方法
  AccountInformation toEntity() {
    return AccountInformation(
      id: id,
      name: name,
      email: email,
    );
  }
}

2. 编辑页面的具体实现 #

在编辑页初始化时，把Bloc传来的Equatable实体转成表单模型，绑定到TextField上，修改时直接更新表单模型的属性即可：

class AccountEditPage extends StatefulWidget {
  final AccountInformation account;

  const AccountEditPage({super.key, required this.account});

  @override
  State<AccountEditPage> createState() => _AccountEditPageState();
}

class _AccountEditPageState extends State<AccountEditPage> {
  late AccountInformationForm _formModel;

  @override
  void initState() {
    super.initState();
    // 从实体转成可编辑的表单模型
    _formModel = widget.account.toForm();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('编辑账户')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              onChanged: (value) => setState(() => _formModel.name = value),
              decoration: const InputDecoration(labelText: '姓名'),
              initialValue: _formModel.name,
            ),
            TextField(
              onChanged: (value) => setState(() => _formModel.email = value),
              decoration: const InputDecoration(labelText: '邮箱'),
              initialValue: _formModel.email,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 把表单模型转回Equatable实体，发送给Bloc处理
                final updatedAccount = _formModel.toEntity();
                context.read<AccountBloc>().add(UpdateAccount(updatedAccount));
                Navigator.pop(context);
              },
              child: const Text('保存修改'),
            ),
          ],
        ),
      ),
    );
  }
}

3. Bloc中的状态处理 #

Bloc的状态依然使用不可变的AccountInformation实体，这样Equatable的对比机制能正常工作，避免不必要的UI重绘。当收到更新事件时，调用后端接口完成数据更新后，生成新的实体替换原有状态即可。

这种方式的好处：

• 既保留了Equatable带来的可靠状态对比能力，符合Bloc的不可变状态设计原则
• 表单模型专门处理编辑场景，逻辑清晰，代码维护起来也简单
• 不用放弃Equatable，也不用在保存时手动拼接大量参数生成新实体

内容的提问来源于stack exchange，提问作者Joker