时间戳

首页 > 解决方案 > 从 json api 解析图像

flutter - 从 json api 解析图像

问题描述

我正在尝试使用 Dog API，尝试获取随机品种图像并将其显示在 ListTile

模型类

class DogData {
  DogData ({this.message, this.status});
  String message;
  String status;

  factory DogData.fromJson(Map<String, dynamic> json) => DogData (
    message: json["message"],
    status: json["status"],
  );

  Map<String, dynamic> toJson() => {
    "message": message,
    "status": status,
  };
}

ListTile 内有错误，未定义名称“索引”。我哪里出错了，我该如何解决？

import 'package:flutter/material.dart';
import 'package:practice_5/model/breedModel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'package:flutter/foundation.dart';
class BreedListTile extends StatelessWidget {
  Future<List<DogData>> fetchDogs(http.Client client) async {
    final response = await client.get('https://dog.ceo/api/breeds/image/random');
    return compute(parseDog, response.body);
  }
  List<DogData> parseDog(responseBody) {
    final parsed = jsonDecode(responseBody) as List;
    return parsed.map<DogData>((json) => DogData.fromJson(json)).toList();
  }
  BreedListTile({Key key, List<DogData> dogList})
      : _dogList = dogList,
        super(key: key);
  final List<DogData> _dogList;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text('Test title'),
        subtitle: Text('Test subtitle'),
        leading: Container(
          child: Image.asset(_dogList[index].message),
        ),
        onTap: () {},
      ),
    );
  }
}

标签： flutterdart

解决方案

您需要在小部件ListTile下使用您的 's ListView。尝试这样的事情：

ListView.builder
  (
    itemCount: _dogList.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return Card(
      child: ListTile(
        title: Text('Test title'),
        subtitle: Text('Test subtitle'),
        leading: Container(
          child: Image.network(_dogList[index].message),
        ),
        onTap: () {},
      ),
    )

编辑：

顺便说一句，您正在尝试从 URL 获取图像。所以，你需要使用Image.network('url'). 阅读更多。

推荐阅读