如何在 Flutter 中 Container 翻译到顶部后删除底部的空白 space？

Question

将 transform 属性应用于容器后，它会在底部提供额外的填充

Container(
  transform: Matrix4.translationValues(0, -70, 0),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: ZeplinColors.light_blue_grey,
      width: 3.0,
    ),
  ),
  child: const CircleAvatar(
    backgroundImage: NetworkImage(
      'https://pixinvent.com/demo/vuexy-bootstrap-laravel-admin-template/demo-1/images/portrait/small/avatar-s-7.jpg',
    ),
    radius: 55.0,
  ),
),

示例（使用 Dart DevTools 检查）：

如何避免这种额外的填充？

这是我试过的DartPad link。

Answer 1

要注意的是不要使用 transform，因为无论您在哪里转换容器，它都会采用最初需要的 space。容器只使用它所需要的space。

所以我为这张图片使用了 Stack，为其他小部件使用了 padding: const EdgeInsets.only(top: circleRadius / 2)。从这个中得到了灵感。多亏了。

我也做了一个DartPad Solution link

如何在 Flutter 中 Container 翻译到顶部后删除底部的空白 space？

How to remove the blank space in bottom after Container translated to top in Flutter?

flutter

padding