颤振中的圆角图像


122

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

如下

在此处输入图片说明


您是否知道为什么这种方法不起作用?
马丁

Answers:


356

使用ClipRRect它会完美地工作

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

9
谢谢 !我按照您说的做了,然后添加fit: BoxFit.fill,看起来不错。
刘四龙'18

2
谢谢-您对如何创建ClipRRect图像的彩色边框有任何想法吗?
iKK

3
@iKK-将其包装在带有BoxDecoration的容器中,并带有适当的border / 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, ), ), )
Daniel Allen

1
感谢,尖端:只适用于一个相同的宽度和高度
阿尔瓦罗阿圭罗

50

您还可以使用CircleAvatar随颤动附带的

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

2
这是最好的答案。我没有多余的backgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
saviour123

@ saviour123并非每个带有圆角的图像都是“头像”。公认的答案是通用答案。
nipunasudha '19

无法使用此小部件设置高度或宽度,这是有问题的。
papillon

38

使用ClipRRect您需要对代码进行硬编码BorderRadius,因此,如果您需要完整的循环内容,请ClipOval改为使用。

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

2
最简单的答案!
Alvin Konda

1
如果子图像不是正方形,则此解决方案中的椭圆将为椭圆形。
BilalŞimşek

29

试试这个,对我有用:

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

您的询问肯定有帮助,谢谢!但是,如果容器的内容不只是图像而是小部件,该怎么办?任何想法?
Oleksandr

13
   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")
        )
    )),

5

对于图像使用此

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

对于资产图片,请使用此

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

1
我已经用它作为答案,您没有提供任何有用的信息。从我-1。
CopsOnRoad

4

对于新版的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',
                ),
            ),
        ),
    ),

3

您可以像这样使用ClipRRect:

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

您可以设置半径,或者只为topLeft或left bottom设置用户,例如:

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

2

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

1

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

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

0

使用此方式,此圆形图像也可以正常工作+您还为网络图像提供了预加载器:

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

0

试试这很好。

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

-1

用户装饰容器的图像。

  @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,
          )
        )
    );
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.