[英]How to do Rounded Corners Image in Flutter
我正在使用 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
它将完美地工作。
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
subject['images']['large'],
height: 150.0,
width: 100.0,
),
)
您还可以使用带有颤振的CircleAvatar
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
使用ClipRRect
您需要硬编码BorderRadius
,因此如果您需要完整的圆形内容,请改用ClipOval
。
ClipOval(
child: Image.network(
"image_url",
height: 100,
width: 100,
fit: BoxFit.cover,
),
),
试试这个,对我有用:
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(
width: 48.0,
height: 48.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("path to your image")
)
)),
对于图像使用这个
ClipOval(
child: Image.network(
'https://url to your image',
fit: BoxFit.fill,
),
);
而对于资产图像使用这个
ClipOval(
child: Image.asset(
'Path to your image',
fit: BoxFit.cover,
),
)
使用新版本的 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',
),
),
),
),
你可以像这样使用 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,
),
),
)
这是我使用过的代码。
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)),
),
),
谢谢!!!
使用 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,
),
),
您可以使用具有半径的 CircleAvatar 小部件:
CircleAvatar(
radius: 50.0,
backgroundImage: AssetImage("assets/img1.jpeg"),
),
使用 ClipRRect 它将解决您的问题。
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Image.network(
Constant.SERVER_LINK + model.userProfilePic,
fit: BoxFit.cover,
),
),
在这个圆形图像中使用这种方式也有效+你也有用于网络图像的预加载器:
new ClipRRect(
borderRadius: new BorderRadius.circular(30.0),
child: FadeInImage.assetNetwork(
placeholder:'asset/loader.gif',
image: 'Your Image Path',
),
)
试试这个效果很好。
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,
),
),
),
);
容器的用户装饰图像。
@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,
)
)
);
试试这个,用 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,
),
),
),
图像所有侧面圆角试试这个
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",
),
),
),
);
对于 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),
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.