Flutter实现ListView列表项点击跳转对应页无需单独建页方案

核心逻辑：只需要编写1个通用详情页，点击列表项时把当前项的完整JSON数据作为参数传入即可，无需为每个列表项单独创建页面。

步骤1：给列表项添加点击交互 #

推荐用InkWell组件包裹列表项的根Card组件，自带Material设计规范的水波纹点击效果，同时配置和Card一致的圆角避免水波纹溢出。点击时通过路由把当前项对应的数据传给详情页即可。
修改后的列表代码如下：

Expanded(
  child: ListView.builder(
    itemCount: cryptoData.length,
    itemBuilder: (context, index) {
      // 提前缓存当前项数据，避免重复索引数组
      final currentCrypto = cryptoData[index];
      return Container(
        padding: EdgeInsets.fromLTRB(20, 10, 16, 0),
        height: 100,
        width: double.maxFinite,
        child: InkWell(
          // 配置和Card一致的圆角，保证水波纹效果贴合
          borderRadius: BorderRadius.circular(10),
          onTap: () {
            // 跳转通用详情页，传入当前项数据
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => CryptoDetailPage(cryptoData: currentCrypto),
              ),
            );
          },
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            elevation: 5,
            child: Padding(
              padding: EdgeInsets.all(7),
              child: Stack(children: <Widget>[
                Align(
                  alignment: Alignment.centerRight,
                  child: Stack(
                    children: <Widget>[
                      Padding(
                          padding: const EdgeInsets.only(left: 5, top: 5),
                          child: Column(
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  cryptoIcon(currentCrypto),
                                  SizedBox(height: 10),
                                  cryptoChange(currentCrypto),
                                  SizedBox(width: 10),
                                  SizedBox(width: 20)
                                ],
                              ),
                            ],
                          ))
                    ],
                  ),
                )
              ]),
            ),
          ),
        ),
      );
    }),
)

注：原代码里Card中多嵌套了一层空Container，直接移除即可，不影响原有布局效果。

步骤2：编写通用详情页 #

新建一个通用的详情页组件，只需要接收单条加密货币的Map数据作为入参，页面内所有内容都根据入参的字段动态渲染，所有列表项点击后都会跳转这个页面，自动加载对应项的专属内容。
示例代码如下：

class CryptoDetailPage extends StatelessWidget {
  // 接收列表页传入的单条币种数据
  final Map<String, dynamic> cryptoData;
  const CryptoDetailPage({super.key, required this.cryptoData});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 直接从传入数据取字段做标题，可在JSON中新增name字段存储币种名称
        title: Text(cryptoData['name'] ?? '币种详情'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部币种图标
            Center(
              child: Image(
                image: AssetImage(cryptoData['image']),
                width: 100,
                height: 100,
              ),
            ),
            SizedBox(height: 30),
            // 涨跌幅数据
            Text(
              cryptoData['change'],
              style: TextStyle(
                fontFamily: "Raleway",
                fontWeight: FontWeight.w900,
                color: Color.fromARGB(255, 4, 35, 93),
                fontSize: 28,
              ),
            ),
            SizedBox(height: 12),
            Text(
              cryptoData['changeValue'],
              style: TextStyle(
                color: Color.fromARGB(255, 4, 35, 93),
                fontSize: 18,
              ),
            ),
            // 下方可自由扩展任意详情内容，比如币种介绍、历史走势、流通数据等
            // 所有动态内容直接从cryptoData里取对应字段即可
          ],
        ),
      ),
    );
  }
}

补充说明 #

• 如果项目使用命名路由，只需在路由表注册该详情页，跳转时通过arguments参数传入当前项数据，详情页通过ModalRoute.of(context)!.settings.arguments获取数据即可，逻辑完全一致。
• 只需保证JSON数据源包含详情页需要的所有字段，不需要做额外的数据转换，列表和详情页可共用同一份数据源。
• 如果需要自定义页面转场动画，可直接在PageRouteBuilder中配置动画参数，不需要修改页面业务逻辑。

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