如何在 Flutter 的 SliverGrid 中对齐文本和图像？

Question

我正在使用 SliverGrid 功能构建我的 gridView。我试图将文本放在图像下方，但文本未与图像对齐，并且显示 Bottom Overflowed 错误。这是代码：

SliverPadding(
          padding: const EdgeInsets.only(left: 8, right: 8),
          sliver: SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 20,
              mainAxisSpacing: 20,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int i) {
                return GestureDetector(
                  onTap: () {},
                  child: Column(
                    children: <Widget>[
                      GridTile(
                        child: Image.network(
                          'https://images.unsplash.com/photo-1562176566-73c303ac1617?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
                          fit: BoxFit.cover,
                        ),
                      ),
                      Text(
                        'Sammy the Pup',
                        style: khomeStyle.copyWith(
                            color: kOrange, fontSize: 14),
                      ),
                    ],
                  ),
                );
              },
              childCount: 200,
            ),
          ),
        ),

这就是 gridview 的样子（上面的输出）：

这就是我想要实现的目标：

Answer 1

GridView的高度由AspectRatio

决定

SliverGridDelegateWithFixedCrossAxisCount(
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 5.0,
            crossAxisCount: 2,
            childAspectRatio: 1 / 1,<---
          ),

随着AspectRatio变小，高度变大，随着比例变大，高度变小

如何在 Flutter 的 SliverGrid 中对齐文本和图像？

How to align text and image in a SliverGrid in Flutter?

grid-layout

dart

flutter