如何让ListView.builder中的每个ListTile可点击并跳转至不同页面？

直接利用ListTile自带的onTap属性就能实现点击跳转，不需要额外嵌套GestureDetector或InkWell（当然如果需要自定义水波纹效果可以用InkWell，下面会讲两种实现方式）。

步骤1：准备目标页面 #

先创建几个你需要跳转的页面示例：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("页面1")),
      body: const Center(child: Text("这是页面1")),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("页面2")),
      body: const Center(child: Text("这是页面2")),
    );
  }
}

步骤2：在ListView.builder中实现点击跳转 #

定义列表数据（包含标题和对应页面），然后给每个ListTile绑定onTap回调：

class HomePage extends StatelessWidget {
  HomePage({super.key});

  // 存储每个列表项的标题和对应跳转页面
  final List<Map<String, dynamic>> listItems = [
    {"title": "前往页面1", "targetPage": const PageOne()},
    {"title": "前往页面2", "targetPage": const PageTwo()},
    // 可继续添加更多条目
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ListView跳转示例")),
      body: ListView.builder(
        itemCount: listItems.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(listItems[index]["title"]),
            // 点击触发跳转
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => listItems[index]["targetPage"]),
              );
            },
          );
        },
      ),
    );
  }
}

可选：用InkWell自定义点击效果 #

如果需要扩大点击区域或自定义水波纹样式，把ListTile嵌套在InkWell里：

return InkWell(
  borderRadius: BorderRadius.circular(10), // 自定义水波纹圆角
  splashColor: Colors.blue.withOpacity(0.3), // 自定义水波纹颜色
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => listItems[index]["targetPage"]),
    );
  },
  child: ListTile(
    title: Text(listItems[index]["title"]),
  ),
);

注意事项 #

• 确保你的主页面在MaterialApp的子树中，这样context才能正确获取导航器
• 如果页面需要传参，可以在目标页面定义构造函数，跳转时传入参数即可

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