如何借助Provider为ListView.builder生成的表单单独保存状态？

针对你用ListView.builder生成表单列表、需要为每个表单单独保存状态的需求，以下是几种可行的实现方案：

方案一：单个Provider统一管理所有表单状态 #

这是最容易理解和维护的方案，通过一个顶层Provider维护所有表单的数据模型列表，每个表单项对应一个独立的可监听模型。

1. 定义表单数据模型 #

创建一个带状态通知的表单项模型，用于存储单个表单的输入值：

class FormItem extends ChangeNotifier {
  String _name = '';
  int _age = 0;

  String get name => _name;
  int get age => _age;

  void updateName(String newName) {
    _name = newName;
    notifyListeners();
  }

  void updateAge(int newAge) {
    _age = newAge;
    notifyListeners();
  }
}

2. 创建列表状态管理Provider #

实现一个管理所有表单项的Provider，提供初始化、更新、保存等方法：

class FormListProvider extends ChangeNotifier {
  final List<FormItem> _formItems = [];

  List<FormItem> get formItems => _formItems;

  // 初始化指定数量的表单项
  void initFormItems(int count) {
    _formItems.clear();
    for (int i = 0; i < count; i++) {
      _formItems.add(FormItem());
    }
    notifyListeners();
  }

  // 更新指定索引的表单数据
  void updateFormItem(int index, {String? name, int? age}) {
    if (index < 0 || index >= _formItems.length) return;
    final item = _formItems[index];
    if (name != null) item.updateName(name);
    if (age != null) item.updateAge(age);
  }

  // 保存所有表单数据
  void saveAllForms() {
    // 此处替换为实际保存逻辑（本地存储/接口上传）
    for (var item in _formItems) {
      print('表单 ${_formItems.indexOf(item)+1}: 姓名=${item.name}, 年龄=${item.age}');
    }
  }
}

3. 构建动态表单列表 #

在UI中通过Consumer监听Provider状态，生成每个表单项：

class DynamicFormList extends StatelessWidget {
  const DynamicFormList({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Consumer<FormListProvider>(
            builder: (context, provider, child) {
              return ListView.builder(
                itemCount: provider.formItems.length,
                itemBuilder: (context, index) {
                  return ChangeNotifierProvider.value(
                    value: provider.formItems[index],
                    child: _FormItemCard(index: index),
                  );
                },
              );
            },
          ),
        ),
        ElevatedButton(
          onPressed: () => Provider.of<FormListProvider>(context, listen: false).saveAllForms(),
          child: const Text('保存所有表单'),
        )
      ],
    );
  }
}

// 单个表单项组件
class _FormItemCard extends StatelessWidget {
  final int index;
  const _FormItemCard({required this.index});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('表单 ${index+1}', style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const SizedBox(height: 12),
            Consumer<FormItem>(
              builder: (context, item, child) {
                return TextField(
                  onChanged: item.updateName,
                  decoration: const InputDecoration(labelText: '姓名'),
                  controller: TextEditingController(text: item.name)..selection = TextSelection.fromPosition(
                    TextPosition(offset: item.name.length),
                  ),
                );
              },
            ),
            const SizedBox(height: 8),
            Consumer<FormItem>(
              builder: (context, item, child) {
                return TextField(
                  onChanged: (value) => item.updateAge(int.tryParse(value) ?? 0),
                  decoration: const InputDecoration(labelText: '年龄'),
                  keyboardType: TextInputType.number,
                  controller: TextEditingController(text: item.age.toString())..selection = TextSelection.fromPosition(
                    TextPosition(offset: item.age.toString().length),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

4. 注册Provider #

在应用入口注册FormListProvider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => FormListProvider()..initFormItems(5), // 初始化5个表单
      child: const MaterialApp(home: DynamicFormList()),
    ),
  );
}

方案二：Indexed Provider的核心实现 #

你提到的Indexed Provider本质是为每个索引对应的表单项单独提供状态实例，和方案一的核心逻辑一致，只是在Provider的绑定方式上更聚焦于单一项：

在ListView.builder的itemBuilder中，直接为当前索引的表单项绑定独立的Provider：

itemBuilder: (context, index) {
  final formItem = provider.formItems[index];
  return Provider<FormItem>.value(
    value: formItem,
    child: Card(
      // 表单项UI结构同方案一
    ),
  );
}

这样每个表单项都能独立监听自己的状态变化，不会互相干扰。

方案三：无Provider的原生状态管理 #

如果不想使用Provider，也可以通过StatefulWidget直接维护表单状态列表：

class StatefulDynamicForm extends StatefulWidget {
  const StatefulDynamicForm({super.key});

  @override
  State<StatefulDynamicForm> createState() => _StatefulDynamicFormState();
}

class _StatefulDynamicFormState extends State<StatefulDynamicForm> {
  final List<Map<String, dynamic>> _formData = List.generate(5, (_) => {'name': '', 'age': 0});

  void _updateForm(int index, String key, dynamic value) {
    setState(() {
      _formData[index][key] = value;
    });
  }

  void _saveAll() {
    for (var data in _formData) {
      print('表单数据：姓名=${data['name']}, 年龄=${data['age']}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: _formData.length,
            itemBuilder: (context, index) {
              final data = _formData[index];
              return Card(
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    children: [
                      TextField(
                        onChanged: (value) => _updateForm(index, 'name', value),
                        decoration: InputDecoration(labelText: '姓名 ${index+1}'),
                        controller: TextEditingController(text: data['name']),
                      ),
                      TextField(
                        onChanged: (value) => _updateForm(index, 'age', int.tryParse(value) ?? 0),
                        decoration: InputDecoration(labelText: '年龄 ${index+1}'),
                        keyboardType: TextInputType.number,
                        controller: TextEditingController(text: data['age'].toString()),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
        ElevatedButton(onPressed: _saveAll, child: const Text('保存'))
      ],
    );
  }
}

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