滚动时缺少网格查看卡

时间:2019-05-28 22:13:39

标签: mobile flutter dart flutter-layout

我试图使基于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,
            ),
          ),
        ),
      ),
    );
  },
);
}
}

0 个答案:

没有答案