Flutter实现ListView点击项跳转至带对应名称的专属页面

你的问题核心在于跳转逻辑的优化，以及专属页面AppBar标题的动态设置。以下是具体修复步骤：

1. 修改专属页面（InsideList）代码 #

将页面改为直接接收类名称作为参数，用于AppBar标题显示，这种方式比传递index更可靠（避免列表排序、删除操作导致index失效）：

import 'package:flutter/material.dart';

class InsideList extends StatelessWidget {
  // 接收从ListView页面传递的类名称
  final String className;
  List<String> _students = [];

  // 构造函数接收类名称参数
  InsideList(this.className);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          // 动态显示对应类的名称
          title: Text(className),
          centerTitle: true,
          backgroundColor: const Color.fromARGB(255, 22, 37, 50),
          toolbarHeight: 65,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30),
            ),
          ),
        ),
        body: _students.length > 0
            ? const Center(child: Text("hi"))
            : const Center(
                child: Text("You currently have no students. Add from below.")));
  }
}

2. 修改ListView页面的跳转逻辑 #

在ListTile的onTap回调中，传递当前列表项的类名称而非index，确保跳转后能直接获取正确的标题内容：

onTap: () {
  Navigator.push(
      context,
      MaterialPageRoute(
          // 传递当前列表项的类名称
          builder: ((context) => InsideList(_items[index]))));
},

额外说明 #

• 选择传递名称而非index的原因：你的_items会执行排序操作，后续如果删除列表项，index会发生变化，直接传递名称能彻底避免数据不匹配的问题。
• 若之前跳转失败，可排查：insideList.dart文件路径是否正确、导入语句无误、构造函数参数类型是否匹配。

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