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

该错误是因为，如果您使用“ 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 2

我可以通过使用以下课程来解决此问题：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);
                              },
                        ),

在不同设备上具有宽高比的抖动gridview问题

2 个答案: