如何在 Flutter 中为所有设备制作网格视图？

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 做了同样的事情。