如何在Flutter中实现圆角图像

Question

如何在Flutter中实现圆角图像

flutterimageflutter-layoutrounded-corners

437

我正在使用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,
    );
  }

如下所示

- Liu Silong

20个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jitesh Mohite · Answer 1

输出：

使用BoxDecoration

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

- Yogesh Alai · Answer 2

使用ClipRRect与设置图片属性的fit: 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,
          ),
        ),

- kinjal dhamat · Answer 3

我们可以使用以下方法在Flutter中创建圆角图片。

容器：

Container(
  width: 150,
  height: 120,
  clipBehavior: Clip.antiAlias,
  decoration:  BoxDecoration(
    borderRadius: BorderRadius.circular(15) // Adjust the radius as needed
  ),
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
  ),
),

卡片：

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  ),
  clipBehavior: Clip.antiAlias,
  elevation: 5.0,
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    width: 150,
    height: 120,
    fit: BoxFit.cover,
  ),
)

ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
    width: 150,
    height: 120,
  ),
)

物理模型：

PhysicalModel(
    color: Colors.transparent,
    borderRadius: BorderRadius.circular(10),
    clipBehavior: Clip.antiAlias,
    elevation: 5.0,
    child: Image.network(
      'https://picsum.photos/seed/picsum/200/300',
      width: 150,
      height: 120,
      fit: BoxFit.cover,
    ))

- Paras Sharma · Answer 4

使用ClipRRect可以解决您的问题。

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

- Mahamat · Answer 5

试一下这个，它很有效。

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,
      ),
     ),
   ),
);

- Ajit Singh · Answer 6

使用这种方式在这个圆形图片中也可以工作，而且你还可以为网络图像添加预加载器：

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

- mewadaarvind · Answer 7

如果想让图片的四个角都变成圆角，可以试试这个方法

Container(
 // height and width depend on your your requirement.
 height: 220.0,
 width: double.infinity,
 decoration: BoxDecoration(
   // radius circular depend on your requirement
   borderRadius: new BorderRadius.all(
    Radius.circular(10),
    ),
    image: DecorationImage(
    fit: BoxFit.fill,
     // image url your network image url       
      image: NetworkImage(
       "dynamic image url",
     ),
    ),
   ),
 );

- Safal Bhatia · Answer 8

Flutter中的圆形图像

ClipRRect(
child: Image.asset(
"assets/images/ic_cat.png",
width: 80,
height: 80,
),
borderRadius: BorderRadius.circular(50),
))

如果您只想要图像的角落，那么只需像下面这样简单地更改BorderRadius.circular即可

ClipRRect(
child: Image.asset(
"assets/images/ic_cat.png",
width: 80,
height: 80,
),
borderRadius: BorderRadius.circular(20),
))

- Hrishikesh Kadam · Answer 9

对于那些在ListView中添加圆角图片作为项目时遇到困难的人来说：

FittedBox(
  fit: BoxFit.scaleDown, // This helps in shrinking the ClipRRect to the size of the Image
  child: ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: Image.asset(
      'assets/app-icons/app-icon.png',
      width: 96,
      height: 96,
    ),
  ),
);

- S.R Keshav · Answer 10

为容器设置用户装饰图片。

  @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,
          )
        )
    );