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

如下


当前回答

用于扑动中的圆形图像

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

如果你只想要图像的角落,然后简单地改变边界半径。像下面这样的圆形

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

其他回答

你可以像这样使用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或左下角:

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

使用ClipRRect它将完美地工作。

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

用于扑动中的圆形图像

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

如果你只想要图像的角落,然后简单地改变边界半径。像下面这样的圆形

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

有了新版本的颤振和材质主题,你需要使用“填充”小部件,以便有一个图像,不填满它的容器。

例如,如果你想在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',
                ),
            ),
        ),
    ),

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