flutter - 如何删除网格视图生成的空白

Question

我想为我的颤振应用应用分类选择。我是颤振的初学者。我已经尽力到达这里，但我不知道如何删除这些空白。

在 homescreen.dart 的正文中，我编写了以下代码。

Expanded(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: KDefaultPadding),
        child: GridView.builder(
          itemCount: products.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 0.75,
            mainAxisSpacing: KDefaultPadding,
            crossAxisSpacing: KDefaultPadding,
          ),
          itemBuilder: (context, index) => ItemCard(
            product:
                products[index].tag == "chicken" ? products[index] : null,
            press: () => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailScreen(
                  product: products[index],
                ),
              ),
            ),
          ),
        ),
      ),
    ),

在项目 card.dart 中我写了以下内容。

    class ItemCard extends StatelessWidget {
  final Product product;
  final Function press;

  const ItemCard({
    Key key,
    this.product,
    this.press,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (product != null) {
      return GestureDetector(
        onTap: press,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(KDefaultPadding),
              // height: 180,
              // width: 160,
              decoration: BoxDecoration(
                color: product.color,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Hero(
                  tag: "${product.id}",
                  child: Image.asset(
                    product.image,
                  )),
            ),
            Padding(
              padding:
                  const EdgeInsets.symmetric(vertical: KDefaultPadding / 4),
              child: Text(
                product.title,
                style:
                    TextStyle(color: kTextColor, fontWeight: FontWeight.bold),
              ),
            ),
            Text(
              "$kCurrency${product.price}",
              style: TextStyle(
                  color: kTextLightColor, fontWeight: FontWeight.bold),
            )
          ],
        ),
      );
    } else {
      return Container();
    }
  }

}

我得到的输出是这样的。

最初是这个...

有人可以帮帮我吗？

标签： flutterdartmobileflutter-layout

Answer 1

将此更改products.length为products.where((product) => product.tag == 'chicken').length不要将意外产品放入 GridView。