Flutter：关闭编辑表单后自动打开下一条数据表单的实现方案

核心思路是利用await Navigator.push()的特性——该方法会在表单页面关闭（执行Navigator.pop()）后才继续执行后续代码，我们可以在这之后检查是否存在下一个索引，若存在则自动打开对应表单，甚至通过递归实现连续打开下一个表单的效果。

步骤1：存储列表数据到页面变量（可选但推荐） #

为了避免依赖FutureBuilder的snapshot（页面重建可能导致snapshot状态变化），建议先将列表数据存储到页面的成员变量中：

class YourListViewPage extends StatefulWidget {
  @override
  State<YourListViewPage> createState() => _YourListViewPageState();
}

class _YourListViewPageState extends State<YourListViewPage> {
  List<EnsaioItemModel>? _ensaioItems; // 存储列表数据

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<EnsaioItemModel>>(
      future: yourDataFetchFuture, // 你的数据获取Future
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          _ensaioItems = snapshot.data; // 将数据存入成员变量
          return ListView.builder(
            itemCount: _ensaioItems!.length,
            itemBuilder: (context, index) {
              EnsaioItemModel ensaioitem = _ensaioItems![index];
              return ListTile(
                title: Text(ensaioitem.title), // 示例列表项内容
                onTap: () => _openEditForm(index), // 调用打开表单的方法
              );
            },
          );
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        }
        return const CircularProgressIndicator();
      },
    );
  }
}

步骤2：实现递归打开表单的方法 #

在页面状态类中定义一个递归方法，负责打开指定索引的表单，并在表单关闭后自动打开下一个：

void _openEditForm(int index) async {
  // 边界判断：索引超出范围则停止
  if (_ensaioItems == null || index >= _ensaioItems!.length) return;

  // 打开当前索引的编辑表单
  await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => EnsaioItemFormView(
        item: _ensaioItems![index], // 传递当前项数据到表单
      ),
    ),
  );

  // 表单关闭后，自动打开下一个索引的表单
  _openEditForm(index + 1);
}

步骤3：确保表单页面能接收数据 #

修改EnsaioItemFormView，添加接收EnsaioItemModel的参数，用于编辑对应数据：

class EnsaioItemFormView extends StatelessWidget {
  final EnsaioItemModel item;

  const EnsaioItemFormView({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    // 你的表单UI代码，基于item展示数据
    return Scaffold(
      appBar: AppBar(title: const Text('编辑项')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 完成编辑后关闭表单
            Navigator.pop(context);
          },
          child: const Text('保存并关闭'),
        ),
      ),
    );
  }
}

实现效果 #

• 点击列表中任意项，会打开对应数据的编辑表单；
• 关闭当前表单后，会自动打开下一个索引的编辑表单；
• 当打开到最后一个项的表单，关闭后不会再打开新表单（因为索引超出范围）。

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