[英]How to Display All the Images from Json Data into Carousal using Flutter
[英]How to split this json and display the images in flutter?
我不知道要显示这些图像。 我将响应存储在列表中。 并且有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": ""
}
]
试试这个代码..像这样制作模型类..
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());
`拆分你的字符串:
var string = "img1,img2,img3";
string.split(","); gives you array of images// ['img1','img2','img3'];
存储该数组而不是最终的String url; 喜欢:`final List urls;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.