Flutter点击列表项跳转对应详情页问题求助

你的代码当前存在两个核心问题：

1. 把InkWell放在了整个列表容器外层，导致点击列表任意区域都会触发跳转，无法区分单个职位
2. 跳转时传递的是不存在的workList变量，且传递的是整个列表，而非当前点击的单个职位数据

以下是具体修改方案：

第一步：调整点击区域到单个职位项 #

移除外层的InkWell，将点击事件绑定到每个列表项上，确保只有点击具体职位时才触发跳转。

第二步：传递单个职位数据到详情页 #

修改JobDetails页面的构造函数，让它接收单个职位的Map数据，而非整个列表。点击时通过index获取当前职位的searchList[index]并传递过去。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:market_clean/screen/jobs/job_details.dart';
import 'package:market_clean/screen/welcomeScreen/welcome_screen.dart';
import 'package:market_clean/utills/color.dart';
import 'package:market_clean/utills/common_widget.dart';

class JobList extends StatelessWidget {
  final List<Map> searchList;

  const JobList({
    Key? key,
    required this.searchList,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          color: white,
          border: Border(
            right: BorderSide(width: 3.0, color: Colors.grey.shade200),
            left: BorderSide(width: 3.0, color: Colors.grey.shade200),
          ),
        ),
        child: ScrollConfiguration(
          behavior: MyBehavior(),
          child: ListView.builder(
            padding: const EdgeInsets.only(top: 10),
            itemCount: searchList.length,
            shrinkWrap: true,
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.only(left: 20.0, right: 20.0),
              child: Column(
                children: [
                  // 给单个职位项绑定点击事件
                  InkWell(
                    onTap: () {
                      // 传递当前点击的职位数据到详情页
                      Get.to(JobDetails(jobData: searchList[index]));
                    },
                    child: ListTile(
                      contentPadding: EdgeInsets.zero,
                      leading: Container(
                        height: 40,
                        width: 40,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            image: DecorationImage(
                                image: AssetImage(searchList[index]["image"]),
                                fit: BoxFit.cover)),
                      ),
                      title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            searchList[index]["title"],
                            style: const TextStyle(
                                color: black,
                                fontSize: 15,
                                fontFamily: "RobotoRegular"),
                          ),
                          const SizedBox(height: 5),
                          // 原代码重复使用title，这里替换为对应字段（示例为company）
                          Text(
                            searchList[index]["company"] ?? "",
                            style: const TextStyle(
                                color: gray95,
                                fontSize: 12,
                                fontFamily: "RobotoRegular"),
                          ),
                          const SizedBox(height: 5),
                          RichText(
                            text: TextSpan(
                              // 替换为对应字段（示例为applicants_count）
                              text: searchList[index]["applicants_count"] ?? "",
                              style: TextStyle(
                                  fontSize: 12,
                                  fontFamily: "RobotoRegular",
                                  color: green),
                              children: const <TextSpan>[
                                TextSpan(
                                  text: ' in last one month',
                                  style: TextStyle(
                                      fontSize: 12,
                                      fontFamily: "RobotoRegular",
                                      color: gray95),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(height: 5),
                          Padding(
                            padding: EdgeInsetsDirectional.fromSTEB(220, 0, 0, 0),
                            child: Text(
                              searchList[index]["price"],
                              style: const TextStyle(
                                  fontSize: 14,
                                  color: blue,
                                  fontFamily: "RobotoBold"),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const Divider(
                    color: whiteF1,
                    thickness: 1,
                  )
                ],
              ),
            ),
          ),
        ));
  }
}

第三步：修改JobDetails页面接收单个职位数据 #

调整JobDetails的构造函数，示例如下：

class JobDetails extends StatelessWidget {
  final Map jobData;

  const JobDetails({Key? key, required this.jobData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(jobData["title"])),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.asset(jobData["image"]),
            SizedBox(height: 16),
            Text(jobData["title"], style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            // 根据你的数据结构添加其他详情字段
          ],
        ),
      ),
    );
  }
}

额外提示 #

你原代码里有多处重复使用searchList[index]["title"]的情况，建议替换为对应的数据字段（比如公司名称、申请人数等），避免页面展示内容重复。

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