flutter - 如何在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变小，高度变大；随着比率变大，高度变小