Flutter中点击列表项跳转至对应页面的实现方案

问题描述 #

我在HomeScreen中通过列表数据构建了ListView，希望点击每个特定列表项时跳转到对应的页面，例如点击“Agentes”项时跳转至AgentScreen。已提供HomeScreen、AgentScreen及路由配置代码，请问如何实现该功能？

解决方案 #

1. 完善HomeModel类，添加路由关联字段 #

首先给HomeModel新增一个路由字段，让每个列表项和对应的页面路由绑定：

class HomeModel {
  final int id;
  final String title; // 修正原拼写错误`tittle`为`title`
  final String icon;
  final String route; // 新增路由字段

  HomeModel(this.id, this.title, this.icon, this.route);
}

更新homes列表，为每个项配置对应路由：

final List<HomeModel> homes = [
  HomeModel(00, "Agentes", "assets/icons/agents_icon.png", Routes.agents),
  HomeModel(01, "Armas", "assets/icons/weapons_icon.png", Routes.weapons),
  HomeModel(02, "Mapas", "assets/icons/maps_icon.png", Routes.maps),
  HomeModel(03, "Ranks", "assets/icons/ranks_icon.png", Routes.ranks),
  HomeModel(04, "Cards", "assets/icons/cards_icon.png", Routes.cards),
];

2. 给列表项添加点击跳转逻辑 #

用InkWell包裹列表项容器（自带Material水波纹交互效果），在onTap回调中通过路由跳转：

Expanded(
  child: ListView(children: [
    for (var home in homes)
      InkWell(
        onTap: () {
          // 跳转到当前列表项对应的路由页面
          Navigator.pushNamed(context, home.route);
        },
        child: Container(
          margin: const EdgeInsets.fromLTRB(10, 15, 10, 20),
          padding: const EdgeInsets.fromLTRB(30, 5, 15, 5),
          width: double.infinity,
          decoration: BoxDecoration(
            border: Border.all(
              color: const Color.fromARGB(255, 255, 70, 85),
              width: 3,
            ),
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                margin: const EdgeInsets.fromLTRB(0, 1, 38, 0),
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Text(
                      home.title,
                      style: GoogleFonts.bowlbyOneSc(
                        color: Colors.white,
                        letterSpacing: .5,
                        fontSize: 24,
                      ),
                    ),
                  ],
                ),
              ),
              const Spacer(),
              Container(
                width: 125,
                height: 135,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Image.asset(home.icon),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
  ]),
),

3. 补全Routes类的路由配置 #

在Routes类中添加所有页面的路由定义和对应页面组件：

class Routes {
  Routes._();

  static const String splash = '/splash';
  static const String home = '/home';
  static const String agents = "/agents";
  static const String weapons = "/weapons";
  static const String maps = "/maps";
  static const String ranks = "/ranks";
  static const String cards = "/cards";

  static final routes = <String, WidgetBuilder>{
    splash: (BuildContext context) => const SplashScreen(),
    home: (BuildContext context) => HomeScreen(),
    agents: (BuildContext context) => const AgentScreen(),
    weapons: (BuildContext context) => const WeaponsScreen(), // 替换为你的武器页面组件
    maps: (BuildContext context) => const MapsScreen(), // 替换为你的地图页面组件
    ranks: (BuildContext context) => const RanksScreen(), // 替换为你的段位页面组件
    cards: (BuildContext context) => const CardsScreen(), // 替换为你的卡片页面组件
  };
}

4. 优化页面返回逻辑（可选） #

目标页面的返回按钮建议使用Navigator.pop(context)，而非pushReplacementNamed，避免破坏路由栈结构：

GestureDetector(
  onTap: () {
    Navigator.pop(context); // 替换原pushReplacementNamed，支持系统返回键返回
  },
  child: Container(
    margin: const EdgeInsets.fromLTRB(0, 0, 100, 2),
    width: 15,
    height: 25,
    child: Image.asset('assets/icons/back_icon.png'),
  ),
),

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