图像在颤动的 BoxDecoration 内有一个空白区域答案

【问题标题】：Image has a white space inside the BoxDecoration in flutter图像在颤动的 BoxDecoration 内有一个空白区域
【发布时间】：2019-07-27 20:33:24
【问题描述】：

我在我的Container() 中创建了一个DecorationBox，我已经添加了所有内容，并且图像很好，但是有一个问题，即使经过大量试验，里面总是有一些空白装饰盒。

这是我的代码：

Container(
   height: 66.0,
   width: 66.0,
   padding: EdgeInsets.all(0.0),
   decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(5.0)),
      border: Border.all(color: Theme.of(context).primaryColor),
      image: DecorationImage(
         fit: BoxFit.cover,
         image: AssetImage("MY_URL")
      )
   )
)

即将到来的结果是：

我尝试在我的Container() 中通过此代码删除填充：

Container(
   padding: EdgeInsets.all(0.0)
)

我已经按照此链接获取我的问题解决方案Image is not taking up space in AlertBox，因为它是AlerBox 的情况，因此我可以使用名为contentPadding 的元素，这是不可用的。请以同样的方式帮助我实现我的解决方案。谢谢

这是我的图片，您可以使用它并告诉我它是否适合您。

【问题讨论】：

然后有一个问题出现了@anmol.majhail，我需要给出盒子的高度和宽度，为此，我只能通过我的容器来做.但是，我在我的孩子身上使用了相同的东西，即child: DecoratedBox()，但它只是像上面那样。
您的图像是带有 alpha（透明）填充的 PNG。您可能希望将其裁剪并另存为新图像，

标签： user-interface flutter flutter-layout

【解决方案1】：

您可以使用ClipOval 小部件并直接将孩子作为Image.asset。您也可以取消 Container 和 BoxDecoration。这是更新后的工作代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
            child:
              ClipOval(
                child: Image.asset('assets/jnvVQ.png', height: 90.0,width: 90.0,),
              ),
            )
        );
  }

我直接将height 和width 传递给图像，而不是使用这些规格的Container。我看到图像正确包装：

您可以根据需要编辑高度和宽度。

【讨论】：

如果我弄错了，欢迎OP纠正我，但这不会产生预期的效果。这个问题有一个图像的裁剪版本，只有中间的内容方块，整个图像以一个更大的白色方块为中心。如果您将 ClipOval 包裹在 Container(color: white) 中并将 Scaffold 设置为黑色，您可以看到这一点 - 这是同样的问题，但有更多的空白，并且根本不会发生裁剪
如果图像内容小于剪裁器，您不需要拉伸图像

【解决方案2】：

问题可能出在您使用的图像上。我不确定这是否只是上传的一个怪癖，但是您链接的图像有一个空白边框，上面有轻微的阴影。尝试裁剪图像，看看是否有帮助

【讨论】：