Flutter中实现ListView列表项点击跳转至不同页面的方法求助

首先明确：不需要用ListTile替代ListView，你当前在ListView.builder里嵌套ListTile的写法完全合理，ListTile本身就内置了onTap点击事件，直接利用它就能实现点击跳转需求。

具体操作如下：

1. 确保你已经创建好所有要跳转的目标页面（比如你已导入的PerformancePulses，以及需要补充创建的AdminIndicator页面）。
2. 在ListTile中添加onTap回调，根据列表项的索引index判断跳转目标，通过Navigator.push完成页面跳转。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:untitled1/PerformancePulses.dart';
// 记得导入或定义你的AdminIndicator页面
import 'package:untitled1/AdminIndicator.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: ListViewHome()
    );
  }
}
class ListViewHome extends StatelessWidget {
  final titles = ["Performance Pulses", "Admin Indicator"];
  final icons = [Icons.arrow_forward_ios_outlined, Icons.arrow_forward_ios_outlined];
  // 可选：用列表存储页面组件，简化跳转逻辑
  final pages = [const PerformancePulses(), const AdminIndicator()];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: titles.length,
        itemBuilder: (context, index) {
          return Card(
              child: ListTile(
                  title: Text(titles[index]),
                  leading: const CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://wcs.smartdraw.com/chart/img/basic-bar-graph.png?bn=15100111840")),
                  trailing: Icon(icons[index]),
                  // 添加点击跳转逻辑
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => pages[index]),
                    );
                  }));
        });
  }
}

如果不想用页面列表的方式，也可以通过switch分支判断索引实现跳转，逻辑同样清晰：

onTap: () {
  switch(index) {
    case 0:
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => PerformancePulses()),
      );
      break;
    case 1:
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => AdminIndicator()),
      );
      break;
  }
}

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