如何在扑动圆角图像

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

如下

enter image description here

380705 次浏览
小开
最佳答案

使用ClipRRect它将完美地工作。

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

1. 圆形图像(无边框)

enter image description here

  • 使用CircleAvatar < h4 >: 
    CircleAvatar(
radius: 48, // Image radius
backgroundImage: NetworkImage('imageUrl'),
)
  • 使用ClipRRect < h4 >: 
    ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network('imageUrl', fit: BoxFit.cover),
),
)

2. 圆形图像(带边框)

enter image description here

  • 使用CircleAvatar < h4 >: 
    CircleAvatar(
radius: 56,
backgroundColor: Colors.red,
child: Padding(
padding: const EdgeInsets.all(8), // Border radius
child: ClipOval(child: Image.network('imageUrl')),
),
)
  • 使用ClipRRect < h4 >: 
    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.圆角图像(无边框)

enter image description here

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

4. 圆角图像(带边框)

enter image description here

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，但这将使答案有点太长。

小开

你也可以使用颤动附带的CircleAvatar

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

对于图像使用这个

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

而对于Asset Image使用这个

ClipOval(
child: Image.asset(
'Path to your image',
fit: BoxFit.cover,
),
)
小开 
   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")
)
)),
小开

试试这个，对我很有效:

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

使用这种方式在这个圆图像也工作+你有预加载器也为网络图像:

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

你可以像这样使用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，设置图像属性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,
),
),
小开

试试这个，效果不错。

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

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

例如，如果你想在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它将解决你的问题。

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

用户装饰形象为一个容器。

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

输出:

enter image description here

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

这是我用过的代码。

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

谢谢你! !

小开
用CircleAvatar和CachedNetworkImage加载图像。 enter image description here < / p > 
CircleAvatar(
radius: 45,
child: ClipOval(
child: CachedNetworkImage(
imageUrl:  "https:// your image url path",
fit: BoxFit.cover,
width: 80,
height: 80,
),
),
),
  1. 如果你也想要边框，然后添加
backgroundColor: Colors.deepOrangeAccent,

在这个

enter image description here

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

图片所有侧面圆角尝试这一个

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",
),
),
),
);
小开

用于扑动中的圆形图像

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

提交答案