Flutter 列显示 Android 中小部件之间的额外空间

Posted 2023-02-23

【中文标题】Flutter 列显示 Android 中小部件之间的额外空间

【英文标题】：Flutter column shows extra space between widgets in Android

【发布时间】：2021-01-13 05:10:15

【问题描述】：

即使使用填充设置为 0 的简单容器，列小部件也会在连续小部件之间显示额外的空间。我尝试使用 SizedBox，将 mainAxisSize 设置为 min，但似乎没有任何效果。 此外，此问题仅出现在 Android OS 中，而不会出现在 Web 或 ios 中。

我的代码：

Scaffold(
  backgroundColor: Colors.yellow,
  appBar: AppBar(
    title: Text(title),
  ),
  body: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: EdgeInsets.zero,
          height: 50,
          color: Colors.black,
        ),
        Container(
          padding: EdgeInsets.zero,
          height: 100,
          color: Colors.black,
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          height: 150,
          color: Colors.black,
        )
      ],
    ),
  ),
)

输出：

我已将图像稍微放大到右侧以更好地显示间隙。两个容器之间出现了一行空格。我在柱子下方放置了另一个高度为 150 的容器，以显示完全不透明和空间之间的差异。我在 Pixel 3 Emulator 和 OnePlus 6T 设备上重新创建了相同的行为。

谁能帮我解决这个问题。我知道这可以使用 Stack 和 Positioned 解决，但我希望找出这是 Flutter SDK 中的问题还是可修复的小部件行为。

【问题讨论】：

老实说对我来说感觉像是一个错误，在下面发布了一个可能的解决方法。

【参考方案1】：

这确实是一个非常烦人的效果。虽然我无法告诉您为什么会发生这种情况，但可以尝试一下，似乎给 Container 一个带有边框而不是颜色的 BoxDecoration 会消除伪影：

Scaffold(
  backgroundColor: Colors.yellow,
  appBar: AppBar(
    title: Text('title'),
  ),
  body: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            color: Colors.black,
          ),
          padding: EdgeInsets.zero,
          height: 51,
          //color: Colors.black,
        ),
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            color: Colors.black,
          ),
          padding: EdgeInsets.zero,
          height: 100,
        ),
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            color: Colors.black,
          ),
          height: 150,
          //color: Colors.black,
        )
      ],
    ),
  ),
)

【参考方案2】：

对我来说，答案不起作用（可能是因为我在容器上有 clipPath，但我找到了类似的解决方案）

decoration: BoxDecoration(
    border: Border.all(width: 0, color: Colors.yourColor),
    color:  Colors.yourColor,
),

在您专栏的所有容器中