如何在 Flutter 中制作圆角图像答案

【问题标题】：如何在 Flutter 中制作圆角图像
【发布时间】：2019-01-01 22:48:16
【问题描述】：

我正在使用 Flutter 制作有关电影的信息列表。现在我希望左边的封面图片是圆角图片。我做了以下，但没有奏效。谢谢！

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

如下

【问题讨论】：

标签： flutter image flutter-layout rounded-corners

【解决方案1】：

使用ClipRRect 会完美运行。

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)

【讨论】：

谢谢！我按照你说的做了，然后加了fit: BoxFit.fill，看起来还不错。
谢谢 - 你知道如何为 clipRRect'ed 图像创建彩色边框吗？
@iKK - 将其包装在一个带有 BoxDecoration 的容器中，并使用适当的边框/borderRadius 道具，如下所示：Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(3.0), border: Border.all(color: Colors.grey[300])), child: ClipRRect( borderRadius: BorderRadius.circular(3.0), child: Image.network( uri, fit: BoxFit.fill, width: imageDimension, height: imageDimension, ), ), )
谢谢，提示：仅适用于相同的宽度和高度
小提醒，ClipRRect 可能会与 ClipRect 混淆，后者没有borderRadius。

【解决方案2】：

你也可以使用CircleAvatar，flutter自带的

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

【讨论】：

这是最好的答案。我做了额外的backgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
@saviour123 并不是每个圆角的图像都是“头像”。接受的一个是通用答案。
无法使用此小部件设置高度或宽度，这是有问题的。

【解决方案3】：

1。圆形图片（无边框）

使用`CircleAvatar`:

CircleAvatar(
  radius: 48, // Image radius
  backgroundImage: NetworkImage('imageUrl'),
)

使用`ClipRRect`:

ClipOval(
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

2。圆形图片（带边框）

使用`CircleAvatar`:

CircleAvatar(
  radius: 56,
  backgroundColor: Colors.red,
  child: Padding(
    padding: const EdgeInsets.all(8), // Border radius
    child: ClipOval(child: Image.network('imageUrl')),
  ),
)

使用`ClipRRect`:

Container(
  padding: EdgeInsets.all(8), // Border width
  decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
  child: ClipOval(
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  ),
)

3。圆角图片（无边框）

ClipRRect(
  borderRadius: BorderRadius.circular(20), // Image border
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

4。圆角图片（带边框）

final borderRadius = BorderRadius.circular(20); // Image border

Container(
  padding: EdgeInsets.all(8), // Border width
  decoration: BoxDecoration(color: Colors.red, borderRadius: borderRadius),
  child: ClipRRect(
    borderRadius: borderRadius,
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  ),
)

_{还有其他方法，比如使用DecoratedBox，但这会使答案有点过长。}

【讨论】：

最简单的答案！
如果子图像不是方形裁剪，在此解决方案中将是椭圆形。

【解决方案4】：

试试这个，对我有用：

Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),

【讨论】：

您的回答绝对有帮助，谢谢！但是如果容器的内容不仅仅是一个图像而是一个小部件呢？有什么想法吗？
使用它会给我一个运行时错误。 “堆栈”中有两个元素。第一个元素必须是我正在寻找答案的圆角图像。
这是最好的答案。 Container 的border 属性应该在ClipRRect 之前使用，因为它在处理器上的开销很大。如果您使用 Image.asset() 或 Image.network() ，这将不适用于 Container 的图像属性，因此您可以分别使用 AssetImage() 和 NetworkImage() 。

【解决方案5】：

   Container(
      width: 48.0,
      height: 48.0,
      decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage("path to your image")
        )
    )),

【讨论】：

【解决方案6】：

图片用这个

ClipOval(
    child: Image.network(
        'https://url to your image',
        fit: BoxFit.fill,
    ),
);

而对于资产图像使用这个

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)

【讨论】：

【解决方案7】：

试试这个，使用 CircleAvatar 并使用 CachedNetworkImage 加载图像。

CircleAvatar(
  radius: 45,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl:  "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

如果你也想要边框，那么添加

backgroundColor: Colors.deepOrangeAccent,

里面

CircleAvatar(
  radius: 45,
  backgroundColor: Colors.deepOrangeAccent,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl: "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

【讨论】：

【解决方案8】：

使用新版本的 Flutter 和 Material 主题，您还需要使用“Padding”小部件才能获得不填充其容器的图像。

例如，如果您想在 AppBar 中插入圆形图像，您必须使用填充，否则您的图像将始终与 AppBar 一样高。

希望这会对某人有所帮助

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),

【讨论】：

【解决方案9】：

这是我使用的代码。

Container(
      width: 200.0,
      height: 200.0,
      decoration: BoxDecoration(
        image: DecorationImage(
         image: NetworkImage('Network_Image_Link')),
        color: Colors.blue,
   borderRadius: BorderRadius.all(Radius.circular(25.0)),
      ),
    ),

谢谢！！！

【讨论】：

【解决方案10】：

你可以像这样使用 ClipRRect：

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

你可以设置你的半径，或者只为左上角或左下角的用户，比如：

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )

【讨论】：

【解决方案11】：

使用 ClipRRect 并设置适合的图像属性：BoxFit.fill

ClipRRect(
          borderRadius: new BorderRadius.circular(10.0),
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('images/image.png'),
            width: 100.0,
            height: 100.0,
          ),
        ),

【讨论】：

【解决方案12】：

使用 ClipRRect 它将解决您的问题。

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),

【讨论】：

【解决方案13】：

输出：

使用BoxDecoration

Container(
              margin: EdgeInsets.all(8),
              width: 86,
              height: 86,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: NetworkImage('https://i.stack.imgur.com/0VpX0.png'),
                    fit: BoxFit.cover
                ),
              ), 
           ),

【讨论】：

【解决方案14】：

在这个圆形图像中使用这种方式也可以工作 + 你也有网络图像的预加载器：

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )

【讨论】：

【解决方案15】：

试试这个效果很好。

Container(
  height: 220.0,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: new BorderRadius.only(
      topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
    ),
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage(
        photoUrl,
      ),
     ),
   ),
);

【讨论】：

【解决方案16】：

容器的用户装饰图像。

  @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(10),
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );

【讨论】：

1。圆形图片（无边框）

使用CircleAvatar:

使用ClipRRect:

2。圆形图片（带边框）

使用CircleAvatar:

使用ClipRRect:

3。圆角图片（无边框）

4。圆角图片（带边框）

使用`CircleAvatar`:

使用`ClipRRect`:

使用`CircleAvatar`:

使用`ClipRRect`: