如何在Flutter中为所有设备制作一个gridview？

Question

我的应用程序中有一个常规的 GridView，其下方有图像和文本。我最近使用设备预览来查看它在其他设备上的显示情况，它在平板电脑上与小型手机上的显示非常不同。是否可以在所有设备上制作一个间距均匀的单个网格，使其差异不会太大？ 这是我的代码：

GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 15.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: MediaQuery.of(context).size.width /
                    (MediaQuery.of(context).size.height / 1.92),
              ),
              itemCount: 100,
              itemBuilder: (context, index) {
                return Column(
                  children: <Widget>[
                    Expanded(
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(15.0)),
                        child: GridTile(
                          child: Image.network(
                            'https://lh3.googleusercontent.com/proxy/DC95dZwFErJk5toYcgiDngZbOnQuvHsZHMe7hIUol_dlykLi3xgJljZlljxJJU2WM2jACnOpHXjidqamjHWIOQ6DrABhkXahUzKwQSIC9dXPGJb8NhqJiLxRNcEEQseKAH9DlEHYgBEsMtY8pqubmv3HU2L15i5CJyuGs5XFhw',
                            height: 150,
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                    ),
                    Padding(
                        padding: const EdgeInsets.only(top: 2.0),
                        child: RichText(
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.center,
                          maxLines: 1,
                          text: TextSpan(
                            text: 'Hello',
                            style: kTasksStyle.copyWith(
                              color: kDarkBlue,
                              fontSize: getValueForScreenType<double>(
                                  context: context, mobile: 14, tablet: 20),
                            ),
                          ),
                        )),
                  ],
                );
              },
            ),

这是它在小型 Android 手机 (320x560) 上的显示方式：

这就是它在平板电脑上的显示方式：

Answer 1

如果我误解了您的问题或您需要澄清，请纠正我。

我认为您这里的问题是由于您没有在

mainAxisSpacing

和

crossAxisSpacing

上使用媒体查询，因此您使用的设备越大，网格项之间的空间就会变得越大。您似乎也对

Text

做了同样的事情。

Answer 2

为了确保网格的大小适应，请尝试这种方式。

添加网格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,
),

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

希望有帮助