Flutter/Dart解析API Future返回值及ListTile动态赋值编译错误求解

问题1：API解析报错&无法获取hc/rc字段 #

错误原因 #

• 你通过jsonDecode解析得到的是Map类型，Dart的Map不支持点运算符直接访问键值，你写res.data运行时会找不到对应的方法/属性，抛出NoSuchMethodError
• 返回的接口结构中hc/rc嵌套在data字段下，你直接从根Map取hc自然拿不到值

修复方案 #

修改getReading方法，直接返回嵌套的data字段：

Future<Map<String, dynamic>> getReading() async {
  const uri = 'https://xxxxxxxxx';
  final response = await http.get(Uri.parse(uri));

  if (response.statusCode == HTTP_OK) {
    final Map<String, dynamic> res = jsonDecode(response.body);
    // 直接返回data字段，后续就可以直接取hc/rc
    return res['data'] as Map<String, dynamic>;
  } else {
    throw Exception('Failed to load Reading summary data.');
  }
}

如果你不想修改请求方法，也可以在取值的时候写res?['data']?['hc']访问嵌套字段。

问题2：Text组件插入变量编译报错 #

错误原因 #

你给ListTile加了const修饰符，const要求构造函数的所有参数都是编译期常量，但你的$hc和$rc是异步请求拿到的运行时变量，不符合const的要求，所以编译器报错。

修复方案 #

直接删掉ListTile前面的const关键字即可：

ListTile( // 移除const修饰符
  leading: FaIcon(
    FontAwesomeIcons.glasses,
    color: Colors.amber,
    size: 50,
  ),
  title: Text('读书'),
  subtitle: Text('截止，共评论书籍$hc本，读书笔记$rc篇'),
)

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