Flutter中无法缩小Image和Border之间的间隙

Question

我有一个颤振代码，我试图在其中提供有关课程的详细信息。我在一张图片下面添加了一段文字。我在图像周围添加了边框，使其看起来不错。

由于某种原因，图像和边框之间存在额外的间隙，我无法弄清楚为什么。

添加我在下面完成的代码

body: SingleChildScrollView(
    child: Column(
      children: [
        Image.asset(course.imagePath),
        Container(
          margin: const EdgeInsets.only(top: 15, right: 15, left: 15),
          alignment: Alignment.centerLeft,
          child: Text(
            course.title,
            style: const TextStyle(
              fontWeight: FontWeight.w700,
              fontSize: 18,
            ),
          ),
        ),
        SizedBox(
          height: 200,
          child: GridView.count(
            crossAxisCount: 3,
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            children: [
              Container(
                decoration: BoxDecoration(
                  border: Border.all(
                    color: const Color(0xFF38B6FF),
                    width: 2.0,
                  ),
                ),
                child: Column(
                  children: [
                    Image.asset(
                      'Clock1.png',
                      height: 90,
                    ),
                    Text(course.time),
                  ],
                ),
              ),
              Column(
                children: [
                  Image.asset(
                    'Items1.png',
                    height: 100,
                  ),
                  Text(course.Date)
                ],
              ),
              Column(
                children: [
                  Image.asset(
                    'Picture1.png',
                    height: 100,
                  ),
                  Text(course.price)
                ],
              ),
            ],
          ),
        ),
        Container(
          margin: const EdgeInsets.only(right: 15, left: 15),
          alignment: Alignment.bottomLeft,
          child: Text(course.description),
        ),

下面是我得到的图像

添加时钟图像还可以显示图像周围没有任何空白，从而导致这种情况发生

请帮助我理解为什么会发生这种情况以及如何纠正它

Answer 1

额外的空间是

Container

从

GridView

扩展到给定约束的大小的结果。默认情况下，

GridView

子项的长宽比为

1.0

，即宽度与高度的比例为1:1。您可以尝试使用

childAspectRatio

:

 的 

GridView

参数来更改纵横比的值

GridView.count(
  childAspectRatio: 0.5,
  // ...

现在你可以看到空间更大了，高度是之前的两倍。

要让您的小部件缩小到所需的高度，请用

Container

包裹

Align

，并将

mainAxisSize

的

Column

设置为

MainAxisSize.min

：

GridView.count(
  // ...
  children: [
    Align( // (1) Wrap the Container with Align
      alignment: Alignment.topCenter, // (2) Set the alignment to top-center
      child: Container(
        // ...
        child: Column(
          mainAxisSize: MainAxisSize.min, // (3) Set the main axis size to min
          // ...
        ),
      ),
    ),
    // ...
  ],
)