【问题标题】:Image not rendered properly in the view for the Image in flutter图像在颤动的图像的视图中未正确渲染
【发布时间】:2020-09-10 03:52:09
【问题描述】:

我正在通过相机和图库成功地将图像加载到CircularProfileAvatar。但在视图上渲染的图像不是圆形的,如屏幕截图所示。我应该如何确保呈现给CircularProfileAvatar 的孩子的图像是圆形的Image。在图像中,您可以看到不应该看到的橙色部分,而棕色圆圈内的整个区域应该被从图库中选择的图像或相机中的图片覆盖。

我正在使用 Flutter 构建这个新应用。

这个依赖使用CircularProfileAvatar

Image imagepic() {
      if (_imageFile == null) {
        return Image(image: AssetImage('assets/images/logo.png'));
      } else {
        return Image.file(_imageFile);
      }
    }

final profilePic = CircularProfileAvatar(
      null,
      child:
          imagepic(), //sets image path, it should be a URL string. default value is empty string, if path is empty it will display only initials
      radius: 50,);

【问题讨论】:

  • 使用fit: BoxFit.cover@Johnny Warner
  • CircularProfileAvatar 这是您自己的自定义小部件吗?请也分享该代码
  • @jitsm555 CircularProfileAvatar 不是我的自定义小部件,我是从https://pub.dev/ 获得的
  • 请分享依赖

标签: image flutter


【解决方案1】:

添加BoxFit.cover覆盖填充圆形区域

 CircularProfileAvatar(
        null,
        child: Image(
          image: AssetImage('assets/images/logo.png'),
          fit: BoxFit.cover,
        ),
      ),

【讨论】:

  • 我试过了,它工作正常,你能分享我你正在尝试的图片网址吗
  • 让我尝试更多的东西,可能是由于其他一些属性不起作用
  • 我查了一下,图片有问题,当你选择纵向图像时它不会渲染到整个区域,但是如果你使用方形图像它会覆盖整个区域
  • @JohnnyWarner:如果解决方案满足您的问题,请您接受答案
猜你喜欢
  • 2012-11-28
  • 1970-01-01
  • 1970-01-01
  • 2019-01-25
  • 2013-11-15
  • 1970-01-01
  • 2012-06-30
  • 2013-04-04
  • 1970-01-01
相关资源
最近更新 更多