如何设置GridView.builder中容器的固定高度？不应该取决于childAspectRatio

Question

实际上，我正在尝试显示GridView.builder中的产品列表，但它的高度根据childAspectRatio的变化而不同，且设备的高度不同。我想为每个设备修复它们...

Answer 1

我遇到了同样的问题，最终计算出childAspectRatio，因此每个单元格最终都具有所需的高度。

double cellWidth = ((MediaQuery.of(context).size.width - allHorizontalPadding) / columnCount;
double desiredCellHeight = 200;
double childAspectRatio = cellWidth / desiredCellHeight;

Answer 2

要做类似的事情，您可能想使用https://pub.dev/packages/flutter_staggered_grid_view

您将能够更轻松地调整布局，否则，使用GridView时，您别无选择，必须使用childAspectRatio。

您可以将其与MediaQuery属性一起使用，以在每个设备上实现良好的设计。

Answer 3

创建类似的东西

首先创建一个数组类列表并覆盖构建方法

class Products extends StatefulWidget {
  @override
  _ProductsState createState() => _ProductsState();
}

class _ProductsState extends State<Products> {
  var productList = [
    {
      'name': "Blazzer",
      "picture": "images/products/blazer1.jpeg",
      "old_price": 120,
      "price": 85,
    },
    /*{
      'name': "Blazzer",
      "picture": "images/products/blazer2.jpeg",
      "old_price": 120,
      "price": 85,
    },*/
    {
      'name': "Red Dress",
      "picture": "images/products/dress1.jpeg",
      "old_price": 120,
      "price": 85,
    },
    /* {
      'name': "Blazzer",
      "picture": "images/products/dress2.jpeg",
      "old_price": 120,
      "price": 85,
    }*/
  ];

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: productList.length,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (BuildContext context, int index) {
          return SingleProduct(
            productName: productList[index]['name'],
            productPicture: productList[index]['picture'],
            productOldPrice: productList[index]['old_price'],
            productPrice: productList[index]['price'],
          );
        });
  }
}

并像下面一样创建上面的类

class SingleProduct extends StatelessWidget {
  final productName;
  final productPicture;
  final productOldPrice;
  final productPrice;

  const SingleProduct(
      {this.productName,
      this.productPicture,
      this.productOldPrice,
      this.productPrice});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
        tag: productName,
        child: Material(
          child: InkWell(
            onTap: () => Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => ProductDetails(
                      //Passing Product details to another activity
                      productDetailName: productName,
                      productDetailNewPrice: productPrice,
                      productDetailOldPrice: productOldPrice,
                      productDetailPicture: productPicture,
                    ))),
            child: GridTile(
                footer: Container(
                  color: Colors.white70,
                  child: ListTile(
                    leading: Text(
                      productName,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    title: Text(
                      "\$$productPrice",
                      style: TextStyle(
                          color: Colors.red, fontWeight: FontWeight.w800),
                    ),
                    subtitle: Text(
                      "\$$productOldPrice",
                      style: TextStyle(
                          color: Colors.black54,
                          fontWeight: FontWeight.w800,
                          decoration: TextDecoration.lineThrough),
                    ),
                  ),
                ),
                child: Image.asset(
                  productPicture,
                  fit: BoxFit.cover,
                )),
          ),
        ),
      ),
    );
  }
}