Flutter实现设施列表页图片点击跳转详情页的问题

你的代码里有两个核心问题导致跳转功能失效：

• 图片容器未绑定点击事件处理逻辑
• 同时维护facilitiesListMap和facilitiesList两个数据源，易出现数据不一致，且未正确传递模型对象到详情页

下面是具体修复步骤和代码修改：

步骤1：移除冗余数据源，统一使用模型数据 #

在_FacilitiesListScreenState中删除facilitiesListMap，直接用facilitiesList模型数据构建列表项，避免数据重复与不一致。

步骤2：给图片添加点击跳转逻辑 #

修改buildList方法，用GestureDetector包裹图片容器，添加onTap回调，通过Navigator.push跳转到详情页并传入对应Facilities实例。同时优化参数传递，直接传入Facilities对象让代码更清晰。

修改后的ListView.builder部分：

ListView.builder(
  itemCount: facilitiesList.length,
  itemBuilder: (BuildContext context, int index) {
    Facilities facilities = facilitiesList[index];
    return buildList(context, facilities);
  }),

修改后的buildList方法：

Widget buildList(BuildContext context, Facilities facilities) {
  return Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(25),
      color: Colors.white,
    ),
    width: double.infinity,
    height: 110,
    margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => FacilitiesDetailsScreen(facilities),
              ),
            );
          },
          child: Container(
            width: 50,
            height: 50,
            margin: EdgeInsets.only(right: 15),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(50),
              border: Border.all(width: 3, color: secondary),
              image: DecorationImage(
                image: NetworkImage(facilities.ImageUrl),
                fit: BoxFit.fill,
              ),
            ),
          ),
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                facilities.name,
                style: TextStyle(
                  color: primary,
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
              SizedBox(height: 6),
              Row(
                children: <Widget>[
                  Icon(Icons.location_on, color: secondary, size: 20),
                  SizedBox(width: 5),
                  Text("UTM Convention Hall",
                    style: TextStyle(color: primary, fontSize: 13, letterSpacing: .3)),
                ],
              ),
              SizedBox(height: 6),
              Row(
                children: <Widget>[
                  Icon(Icons.sports_tennis, color: secondary, size: 20),
                  SizedBox(width: 5),
                  Text(facilities.name.contains("Tennis") ? "Outdoor Courts" : "Indoor Courts",
                    style: TextStyle(color: primary, fontSize: 13, letterSpacing: .3)),
                ],
              ),
            ],
          ),
        )
      ],
    ),
  );
}

步骤3：优化Facilities模型（可选但推荐） #

为让数据更完整，给Facilities类添加location和type字段，统一数据来源：

修改后的Facilities模型：

class Facilities {
  String name;
  String description;
  String ImageUrl;
  String location;
  String type;

  Facilities({
    required this.name,
    required this.description,
    required this.ImageUrl,
    required this.location,
    required this.type,
  });
}

List<Facilities> facilitiesList = [
  Facilities(
    name: 'Badminton Court',
    description: 'Badminton Courts are the rectangular surfaces used for the racket sport of badminton. divided in half by a center badminton net, courts are usually marked for both singles or doubles games with boundary widths varying between the two match types',
    ImageUrl: 'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/badminton.jpg?alt=media',
    location: 'UTM Convention Hall',
    type: 'Indoor Courts',
  ),
  Facilities(
    name: 'Tennis Court',
    description: 'Table tennis, also known as ping-pong and whiff-whaff, is a sport in which two or four players hit a lightweight ball, also known as the ping-pong ball, back and forth across a table using small rackets. The game takes place on a hard table divided by a net.',
    ImageUrl: 'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/tennis.jpg?alt=media',
    location: 'UTM Convention Hall',
    type: 'Outdoor Courts',
  ),
  Facilities(
    name: 'PingPong Court',
    description: 'Table tennis, also known as ping-pong and whiff-whaff, is a sport in which two or four players hit a lightweight ball, also known as the ping-pong ball, back and forth across a table using small rackets. The game takes place on a hard table divided by a net.',
    ImageUrl: 'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/pinpong.jpg?alt=media',
    location: 'UTM Convention Hall',
    type: 'Indoor Courts',
  ),
  Facilities(
    name: 'Futsal Court',
    description: 'Futsal is an association football-based game playedon a hard court smaller than a football pitch, and mainly indoors. It has similarities to five-a-sidefootball and indoor soccer.',
    ImageUrl: 'https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/futsal.jpg?alt=media',
    location: 'UTM Convention Hall',
    type: 'Indoor Courts',
  ),
];

之后列表里的location和type可直接替换为facilities.location、facilities.type，保证数据统一。

修改完成后，点击图片即可正常跳转到对应详情页，代码逻辑也更规范。

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