不同设备上宽高比的flutter gridview问题

Question

我想在gridview中有一个固定高度的容器。我正在使用以下代码。它在不同设备上显示不同的高度。有什么方法可以控制高度，使其在所有设备上看起来都相同。

                            GridView.count(
                              shrinkWrap: true,
                              crossAxisCount: 2,
                              mainAxisSpacing: 0,
                              childAspectRatio:
                                  MediaQuery.of(context).size.width /
                                      (MediaQuery.of(context).size.height / 1),
                              crossAxisSpacing: 8,
                              children: _productData.map((opt) {
                                return _productCard(context, opt, cart);
                              }).toList(),
                            ),

Answer 1

我能够通过使用此处的类解决该问题：https://github.com/flutter/flutter/issues/55290 然后像这样使用它

                            GridView.builder(
                              itemCount: _productData.length,
                              gridDelegate:
                                  SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
                                crossAxisCount: 2,
                                crossAxisSpacing: 5,
                                mainAxisSpacing: 5,
                                height: 300.0,
                              ),
                              itemBuilder: (BuildContext ctx, int index) {
                                var opt = _productData[index];
                                return _productCard(context, opt, cart);
                              },
                        ),

Answer 2

错误是因为，如果您使用“MediaQuery”，它将获取您运行它的设备的尺寸（宽度，高度），并且您知道所有设备都有不同的尺寸。 因此，使用 MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 1) 不会在所有设备上给出准确的结果。 我建议你这样做

GridView.count(
                          shrinkWrap: true,
                          crossAxisCount: 2,
                          mainAxisSpacing: 0,
                          childAspectRatio: 2:1
                              
                          children: _productData.map((opt) {
                            return _productCard(context, opt, cart);
                          }).toList(),
                        ),

您可以不断替换纵横比的值，直到获得所需的尺寸。

Answer 3

我更喜欢使用自己的公式，它也使用childAspectRatio，childAspectRatio的值来自deviceWidth / itemPerRowCount / itemHeight。

GridView.builder(
    physics: const NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: itemPerRow,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
        childAspectRatio: deviceWidth / itemPerRow / itemHeight),
    itemBuilder: (context, index) => _gridItemBuild(context, dataState[index]),
    itemCount: dataState.length,
),

它对我来说工作得很好，并且文本的大小得到了纠正，但是对于该项目，我在文本中添加了扩展布局。

希望有帮助