Flutter-实现图片圆角的几种方式
关注 https://github.com/jiangkang/flutter-system 了解更多Flutter相关的知识
图片圆角在开发中还是非常常见的,用Flutter实现圆角还是非常简单的,目前了解的大概有下面这几种:
- 通过Card的shape属性
- 通过Container的decoration
- 直接使用ClipRRect
效果图
通过Card的shape属性
Card( shape: RoundedRectangleBorder( borderRadius: BorderRadiusDirectional.circular(20)), clipBehavior: Clip.antiAlias, child: Image.asset( "images/landscape0.jpeg", width: double.maxFinite, ), )
唯一值的注意的地方就是borderRadius看准了,不要用错了,要不然没效果。
通过Container的decoration
Container( decoration: ShapeDecoration( image: DecorationImage( image: AssetImage("images/landscape1.jpeg"), fit: BoxFit.fitWidth), shape: RoundedRectangleBorder( borderRadius: BorderRadiusDirectional.circular(20))), width: double.maxFinite, height: 300, child: Align( child: Padding( padding: const EdgeInsets.all(8.0), child: Text( "Container decoration实现圆角(radius = 20)", style: TextStyle(color: Colors.white), ), ), alignment: Alignment.bottomCenter, ), )
使用的DecorationImage,相当于把图片当做一个背景,这里需要注意的就是Container的child的尺寸问题,就算不放内容,也需要设置一个带尺寸的child Widget。
直接使用ClipRRect
ClipRRect( borderRadius: BorderRadius.circular(20), child: Image.asset("images/landscape2.jpeg"), ),
这种方式是最简单的,直接使用即可。
相关推荐
csdnYF 2020-11-15
SemiraChen 2020-10-10
YejiaSun 2020-09-27
csdnYF 2020-09-20
FrankAbagnale 2020-09-15
wmd看海 2020-07-27
szintu 2020-07-05
chaoxiao 2020-07-04
wmd看海 2020-06-27
龙衣 2020-06-26
龙衣 2020-06-09
龙衣 2020-06-08
wmd看海 2020-06-04
Samlss 2020-06-04
wmd看海 2020-06-04
csdnYF 2020-05-30
androidgjw 2020-05-28
wmd看海 2020-05-28
wmd看海 2020-05-19