如何在Flutter中去除图像和文本之间的间距

Question

我希望能够在图标下方（fb icon）精确地显示文本（Facebook），并且没有任何间距。以下是当前的代码：

：

@override   Widget build(BuildContext context) {
    return Scaffold(
      // prevent pixel overflow when typing
      resizeToAvoidBottomPadding: false,
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(
                  "assets/login_background.png",
                ),
                fit: BoxFit.cover)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          //  mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[

           Image(
              image: AssetImage("assets/fb_icon.png"),
              width: 180.0,
              height: 250.0,
            ),
            new Text('Facebook.',
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    color: Colors.white,)),
            _textFields(),
            _signInButton(),
            _socialMediaSignIns(),
            _accountButtons()
          ],
        ),
      ),
    );
   }
 }

目前，我看到的情况是这样的，我希望去掉图片和文本之间的空格。

- Darshan

---

你尝试过调整图像大小吗？可以在Image中设置“fit: BoxFit.fitHeight”。 - Andrii Turkovskyi

这确实去掉了一些间距，但是它增加了图像的高度，仍然有一些间距我想要去掉，这样文本就可以紧贴在图像下面而没有任何空白。@AndreyTurkovsky - Darshan

首先 - 从“Image”中删除“width”和“height”，然后检查您的fb_icon.png - 我认为它可以在png图像内部填充。 - Andrii Turkovskyi

Answer 1

实际上，您应该使用BoxFit.cover来看到效果，因为图像的物理高度比分配给它的高度要低。

这里是解决方案。

       Image(
          image: AssetImage("assets/fb_icon.png"),
          width: 180.0,
          height: 250.0,
          fit: BoxFit.cover,
        ),

您可以尝试其他的BoxFit，看哪一个更适合您。

- CopsOnRoad

---

很好的回答/解释。我犯了多愚蠢的错误，你的解释解决了一切。感谢警官 @CopsOnRoad。 - Llama

Answer 2

Image(
  image: AssetImage("assets/fb_icon.png"),
),
Text('Facebook.',
    style: TextStyle(
      fontStyle: FontStyle.italic,
      color: Colors.white,))

在这种情况下，必须没有填充。您可以通过以下方式在png文件中准确检查填充：

Image(
  image: AssetImage("assets/fb_icon.png"),
  color: Colors.red,
  colorBlendMode: BlendMode.multiply,
),

这将显示您的图片真实的边框

- Andrii Turkovskyi