我想创建一个动态类别显示列表,每次我从API添加新类别时,它都会在flutter应用程序中显示,并带有类别内产品列表。
所以我正在使用 Pageview.builder 与 Gridview.builder 显示项目,但问题是所有 Pageviews 具有相同的GridView.builder的内容。 如何使每个PageView具有不同的GridView构建器内容?
代码:
class GridShop extends StatefulWidget {
@override
_GridShop createState() => new _GridShop();
}
class _GridShop extends State<GridShop> {
@override
Widget build(BuildContext context) {
double _gridSize =
MediaQuery.of(context).size.height * 0.88; //88% of screen
double childAspectRatio = MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 1.0);
List<Product> _products = new ProductsRepository().categoryProducts();
List _categories = new ProductsRepository().categories();
Widget _pageItemBuilder(BuildContext context, int index){
return new GridView.builder(
itemCount: _products.length,
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: childAspectRatio),
itemBuilder: (BuildContext context, int index) {
return new Padding(
padding: EdgeInsets.only(
top: index % 2 == 0 ? 20 : 0,
right: index % 2 == 0 ? 5 : 0,
left: index % 2 == 1 ? 5 : 0,
bottom: index % 2 == 1 ? 20 : 0),
child: ProductWidget(
product: _products[index]));
});
}
_onPageViewChange(int page) {
print("Current Page: " + page.toString());
int previousPage = page;
if(page != 0) previousPage--;
else previousPage = 2;
print("Previous page: $previousPage");
}
return new Column(children: <Widget>[
new Container(
height: _gridSize + 100,
decoration: BoxDecoration(
color: const Color(0xFFeeeeee),),
padding: EdgeInsets.only(left: 10, right: 10),
child: new Column(children: <Widget>[
new Container(
margin: EdgeInsets.only(top: 40),
child: new Column(children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new CategoryDropMenu(),
new FlatButton.icon(
onPressed: () {
print("/-***********************-/-*/-*/*-/-*/-/-*/*-/*-/-*/*-/-/-*/-*/-");
print(_categories.toString());
},
icon: new Icon(Icons.filter_list),
label: new Text("cats"))
]),
new Container(
height: _gridSize - 60,
margin: EdgeInsets.only(top: 0),
child: new PhysicalModel(
color: Colors.transparent,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(_gridSize / 10 - 10),
bottomRight:
Radius.circular(_gridSize / 10 - 10)),
clipBehavior: Clip.antiAlias,
child: new PageView.builder(
itemCount: _categories.length,
scrollDirection: Axis.horizontal,
reverse: false,
pageSnapping: true,
onPageChanged: _onPageViewChange,
itemBuilder: (BuildContext context, int index){
return Container(
child: Column(
children: <Widget>[
_pageItemBuilder(context, index)
],
),
);
},
))),
new MenuBar(),
]))
])),
]);
}
}
以及如何将列表内容传递给构建者? 我尝试过
Future<String> getCategoryStocks(url) async {
final urlCategories = url;
var response = await http.get(urlCategories);
if (response.statusCode == 200) {
// If server returns an OK response, parse the JSON.
categoriesData = utf8.decode(response.bodyBytes);
print(categoriesData);
return categoriesData;
} else {
// If that response was not OK, throw an error.
throw Exception('Failed to load categories');
}
}
List<Product> categoryProducts(){
print("/////////////////////////////////////////////////////////Category Products//////////////////////////////////////////////////////////");
List dataCat = categories();
List links = [];
List linkStocks = [];
for (var item in dataCat) {
links.add("laravel/public/api/category/" + item.toString());
}
print(links.toString());
for (var link in links) {
var get = getCategoryStocks(link.toString());
var jsonB = (json.decode(get) as List).cast<Map<String, dynamic>>();
var list = jsonB.map<Response1>((e) => Response1.fromJson(e)).toList();
linkStocks.add(get);
}
print(linkStocks.toString());
var jsonB = (json.decode(body) as List).cast<Map<String, dynamic>>();
var list = jsonB.map<Response1>((e) => Response1.fromJson(e)).toList();
for (var item in list) {
items.add(new Product("laravel/storage/app/upload/images/" + item.image ,item.name, item.descriptions, item.price, item.quantity ,item.id));
}
print(items);
print(items.runtimeType);
return items;
}
List categories() {
var jsonB = (jsonDecode(categoriesData) as List).cast<Map<String, dynamic>>();
var list = jsonB.map<Response1>((e) => Response1.fromJson(e)).toList();
List<String> categories = [];
for (var item in list) {
categories.add(item.name);
}
print(categories.toString());
return categories;
}