我试图使基于Crud的应用程序变得扑朔迷离,从云数据库中获取数据并在我的应用程序中列出。在应用程序中,我有产品列表库,该列表与网格视图构建器和卡一起使用,并在我滚动时进行调试;如果我尝试使用列表视图生成器,则卡片会一张一张地丢失。我附上了下面的代码。谢谢。
import 'package:flutter/material.dart';
import 'package:samplea/components/ad_productlist.dart';
import 'package:samplea/database/dbhub.dart';
import 'package:samplea/pages/us_productdetail.dart';
class UserProductList extends StatefulWidget {
@override
_UserProductListState createState() => _UserProductListState();
}
class _UserProductListState extends State<UserProductList> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new FutureBuilder<List>(
future: DBHub().getProductsData(),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? new UserProducListSub(
list: snapshot.data,
)
: new Center(
child: CircularProgressIndicator(),
);
},
),
);
}
}
class UserProducListSub extends StatelessWidget {
final List list;
UserProducListSub({this.list});
@override
Widget build(BuildContext context) {
return new GridView.builder(
itemCount: list == null ? 0 : list.length,
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (context, i) {
return Card(
child: Material(
shadowColor: Colors.deepOrange,
child: InkWell(
onTap: () => Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new ProductDetails(
list: list,
index: i,
))),
child: new GridTile(
footer: Container(
child: new Row(
children: <Widget>[
Expanded(
child: new Text(list[i]['name']),
),
new Text("price: ${list[i]['price']}"),
],
),
),
child: Container(
color: Colors.red,
),
),
),
),
);
},
);
}
}