我有本地列表中的静态 Gridview 如何使其动态化 [英] I have static Gridview from local List How to make it dynamic
本文介绍了我有本地列表中的静态 Gridview 如何使其动态化的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我现在有本地列表中的 gridview 我想从 api 中填充该 gridview 任何想法如何做到这一点,
i have gridview from local list now i want to populate that gridview from api any idea how to do it,
这就是我的 api 响应的样子
this is how my api response look like
{
"status": "SUCCESS",
"data": [
{
"img": "http://3.127.255.230/rest_ci/assets/uploads/products/1589784928__food12.jpg",
"name": "Fruit Salad"
},
{
"img": "http://3.127.255.230/rest_ci/assets/uploads/products/1589784733__food12.jpg",
"name": "Fruit Salad"
},
{
"img": "assets/food3.jpeg",
"name": "Hamburger"
},
]
}
这是我用于 gridview 的静态(本地列表)代码
this is my static (local list) code for gridview
GridView.builder(
shrinkWrap: true,
primary: false,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 1.25),
),
itemCount: foods == null ? 0 :foods.length,
itemBuilder: (BuildContext context, int index) {
// Food food = Food.fromJson(foods[index]);
Map food = foods[index];
// print(foods);
// print(foods.length);
return GridProduct(
img: food['img'],
isFav: false,
name: food['name'],
rating: 5.0,
raters: 23,
);
},
),
这是我的 GridProduct 类
this is my GridProduct class
import 'package:flutter/material.dart';
import 'package:restaurant_ui_kit/screens/details.dart';
import 'package:restaurant_ui_kit/util/const.dart';
import 'package:restaurant_ui_kit/widgets/smooth_star_rating.dart';
class GridProduct extends StatelessWidget {
final String name;
final String img;
GridProduct({
Key key,
@required this.name,
@required this.img,
})
:super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
child: ListView(
shrinkWrap: true,
primary: false,
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 3.6,
width: MediaQuery.of(context).size.width / 2.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.asset(
"$img",
fit: BoxFit.cover,
),
),
),
Padding(
padding: EdgeInsets.only(bottom: 2.0, top: 8.0),
child: Text(
"$name",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w900,
),
maxLines: 2,
),
),
],
),
);
}
}
这是我的 api 请求,我正在打印响应,但我不知道如何从 Api 响应填充该 gridview.
and this my api request i am printing response but i do not know how to populate that gridview from Api response.
Future<Map> getJson() async {
String apiUrl = 'http://3.127.255.230/rest_ci/api/products/show_all_prod?rest_id=6';
Map<String,String> headers = {
http.Response response = await http
.get(apiUrl);
return json.decode(response.body); // returns a List type
}
void dataShower() async{
getJson();
Map _data = await getJson();
print(_data);
}
推荐答案
您可以使用 FutureBuilder 小部件
You can use FutureBuilder widget
FutureBuilder<Map>(
future: getJson(), // your function which calls the API and return the response
builder: (BuildContext context, AsyncSnapshot<Map> snapshot) {
if (snapshot.hasData) {
// sanpshot.data will contain the response got from API
// snapshot.data['data'] should give you the list of foods which you can
// use with GridView.builder
List foods = snapshot.data['data'];
return GridView.builder(
itemCount: foods.length,
itemBuilder: (BuildContext context, int index) {
Map food = foods[index];
return GridProduct(
img: food['img'],
isFav: false,
name: food['name'],
rating: 5.0,
raters: 23,
);
}
);
}
// handle if the API fails
}
);
这篇关于我有本地列表中的静态 Gridview 如何使其动态化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文