Flutter ListView onTap条件跳转失效问题求助

问题根源 #

你的点击事件条件判断逻辑完全错误：

// 错误写法
if (_items.contains(_items[index]["role"] == 'nurse')) { ... }

_items.contains()是用来检查数组中是否包含某个元素，而你这里需要的是直接判断当前列表项的role字段值是否等于目标字符串，不需要用contains。

另外，你的JSON数据中role值存在大小写不一致的情况（比如nurse全小写、Patient首字母大写、Doctor首字母大写），如果直接硬编码比较，会出现匹配失败的情况。

修正后的代码 #

将onTap中的判断逻辑修改为直接比较role值，同时统一大小写后再判断，避免大小写问题：

onTap: () {
  final String role = _items[index]["role"].toLowerCase(); // 统一转小写
  print(role);
  if (role == 'nurse') {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (ctxt) => DetailPage()),
    );
  } else if (role == 'doctor') {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (ctxt) => nurse()),
    );
  } else if (role == 'patient') {
    // 补充Patient角色对应的页面跳转逻辑
    Navigator.push(
      context,
      MaterialPageRoute(builder: (ctxt) => PatientPage()), // 假设存在PatientPage
    );
  }
},

额外优化建议 #

1. 创建数据模型类：避免直接操作Map，定义一个User类来解析JSON数据，类型更安全，代码可读性更高：

class User {
  final String id;
  final String name;
  final String role;
  final String phoneNumber;
  final String emailId;
  final String description;
  final String imageUrl;

  User({
    required this.id,
    required this.name,
    required this.role,
    required this.phoneNumber,
    required this.emailId,
    required this.description,
    required this.imageUrl,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      role: json['role'],
      phoneNumber: json['phone_number'],
      emailId: json['email_id'],
      description: json['description'],
      imageUrl: json['imageUrl'],
    );
  }
}

修改readJson方法：

Future<void> readJson() async {
  final String response = await rootBundle.loadString('assets/sample.json');
  final data = await json.decode(response);
  setState(() {
    _items = List<User>.from(data["items"].map((x) => User.fromJson(x)));
  });
}

之后在itemBuilder中直接使用User对象属性：

final User user = _items[index];
// 示例：user.role、user.name等

2. 规范页面命名：页面类名nurse不符合Dart大驼峰命名规范，建议改为NursePage，保持代码风格统一。

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