Flutter列表获取对应Facilities实例报错的技术求助

问题根源 #

报错的核心原因是你的facilitiesList是List<Map<dynamic, dynamic>>类型，而你试图直接将其中的Map元素赋值给Facilities类型的变量，两者类型不兼容。

分步解决方案 #

1. 完善Facilities模型类

确保你的Facilities类包含从Map初始化的构造方法（如果还没有的话）：

class Facilities {
  final String name;
  final String location;
  final String type;
  final String logoText;

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

  // 从Map生成Facilities实例的工厂构造函数
  factory Facilities.fromMap(Map<String, dynamic> map) {
    return Facilities(
      name: map['name'] as String,
      location: map['location'] as String,
      type: map['type'] as String,
      logoText: map['logoText'] as String,
    );
  }
}

2. 修正列表类型与初始化

有两种方式处理列表：

方式一：直接初始化List

把原有的Map列表替换成Facilities实例列表：

final List<Facilities> facilitiesList = [
  Facilities(
    name: "Badminton Court",
    location: "UTM Convention Hall",
    type: "Indoor Courts",
    logoText: "https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/badminton.jpg?alt=media",
  ),
  Facilities(
    name: "PingPong Court",
    location: "UTM Convention Hall",
    type: "Indoor Courts",
    logoText: "https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/pinpong.jpg?alt=media",
  ),
  Facilities(
    name: "Futsal Court",
    location: "UTM Convention Hall",
    type: "Indoor Courts",
    logoText: "https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/futsal.jpg?alt=media",
  ),
  Facilities(
    name: "Tennis Court",
    location: "UTM Convention Hall",
    type: "Outdoor Courts",
    logoText: "https://firebasestorage.googleapis.com/v0/b/oracle-diamond-02.appspot.com/o/tennis.jpg?alt=media",
  ),
];

方式二：保留Map列表，获取时转换

如果需要保留原Map列表，在赋值时通过构造函数转换：

Facilities facilities = Facilities.fromMap(facilitiesList[index]);

3. 修复ListView点击事件无效问题

你当前的代码中创建了Card但未返回，而是返回了buildList，导致点击事件完全失效。修改buildList方法，让它包含点击交互并接收Facilities参数：

Widget buildList(BuildContext context, Facilities facility) {
  return GestureDetector(
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => FacilitiesDetailsScreen(facility),
        ),
      );
    },
    child: 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>[
          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(facility.logoText),
                fit: BoxFit.fill,
              ),
            ),
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  facility.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(
                      facility.location,
                      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(
                      facility.type,
                      style: TextStyle(color: primary, fontSize: 13, letterSpacing: .3),
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    ),
  );
}

然后更新ListView.builder的itemBuilder：

itemBuilder: (BuildContext context, int index) {
  return buildList(context, facilitiesList[index]);
}

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