Question

我不知所措，我不知道显示这些图像。我将响应存储在列表中。其中有6个对象，每个对象都包含带有逗号分隔的图像。我尝试了很多次。我需要显示具有详细信息的图像。请帮帮我吗？我在下面添加了从服务器获取的json模型，请帮我显示所有图像及其详细信息

  [{
        "name": "Sports",
        "title": "title 1,title 2,title 3",
        "year": "2016,2012,2016",
        "month": "09,10,09",
        "content": "content 1,content 2,content 3",
        "filename": "http://sports.org/admin/storage/5b7gjg370nJbSZuVg.jpeg,http://sports.org/admin/storage/l'lb7hjll;inJbSZuVg.jpeg,http://sports.org/admin/storage/5b7bf5dshfbSZuVg.jpeg",
        "alt": ",,"
    },
    {
        "name": "Chess",
        "title": "title 1,title 2,title 3",
        "year": "2008,2007,2002",
        "month": "11,11,11",
        "content": "content 1,content 2,content 3",
        "filename": "http://sports.org/admin/storage/5b7bf58f14d98/eWAD6yN370nJbSZuVg.jpeg,http://sports.org/admin/storageiitrybSZuVg.jpeg,http://sports.org/admin/storage/5b7bhshs370nJbSZuVg.jpeg",
        "alt": ",,"
    },
    {
        "name": "Reading",
        "title": "title 1",
        "year": "2018",
        "month": "03",
        "content": "content 1",
        "filename": "http://sports.org/admin/storage/5b7bf58f14d98/eWAD6yN370nJbSZuVg.jpeg",
        "alt": ""
    }
]

Answer 1

尝试此代码。这样制作模型类。

class UserData {
final int albumId;
final int id;
final String title;
final String url;
final String thumbnailUrl;

UserData({this.albumId, this.id, this.title, this.url, this.thumbnailUrl});

factory UserData.fromJson(Map<String, dynamic> json) {
return new UserData(
    albumId: json['albumId'],
    id: json['id'],
    title: json['title'],
    url: json['url'],
    thumbnailUrl: json['thumbnailUrl']);
}
}

之后，使设计像..

class MyApiStateFull extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return MyApiState();
 }
 }

class MyApiState extends State<MyApiStateFull> {
List<UserData> list = List();

var isLoading = false;

void fetchData() async {
setState(() {
  isLoading = true;
});
final response = await get("https://jsonplaceholder.typicode.com/photos");
if (response.statusCode == 200) {
  list = (json.decode(response.body) as List)
      .map((data) => UserData.fromJson(data))
      .toList();

  setState(() {
    isLoading = false;
  });
} else {
  throw Exception('Failed to load photos');
}
}

@override
 Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  appBar: AppBar(
    title: Text("Api Call"),
  ),
  bottomNavigationBar: Padding(
    padding: const EdgeInsets.all(8.0),
    child: RaisedButton(
      onPressed: fetchData,
      child: Text("Fetch Photo Data"),
    ),
  ),
  body: isLoading
      ? Center(
          child: CircularProgressIndicator(),
        )
      : ListView.separated(
          separatorBuilder: (context, index) => Divider(
                color: Colors.black,
              ),
          itemCount: list.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              contentPadding: EdgeInsets.all(8.0),
              title: Text(list[index].title),
              trailing: Image.network(
                list[index].thumbnailUrl,
                fit: BoxFit.cover,
                height: 40.0,
                width: 40.0,
              ),
              onTap: () {
               /* Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => MyDetails(list[index])));*/
              },
            );
          }),
   );
  }
  }

运行应用主程序..

void main() => runApp(MyApiCallApp());

Answer 2

`分割字符串：

var string = "img1,img2,img3";
string.split(",");            gives you array of images// ['img1','img2','img3'];

存储该数组，而不是最终的String url；像：“最终列表网址；

如何拆分此json并以抖动方式显示图像？

2 个答案: