时间戳

首页 > 解决方案 > 如何在 Flutter 中为所有设备制作网格视图？

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

问题描述

我的应用程序中有一个带有图像和文本的常规 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) 上的显示方式： 在此处输入图像描述

这就是它在平板电脑上的显示方式： 在此处输入图像描述

标签： flutteruser-interfacedart

解决方案

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

我认为你的问题是由于你没有使用媒体查询，mainAxisSpacing所以crossAxisSpacing你使用的设备越大，网格项目之间的空间就越大。您似乎也对Text.

推荐阅读