关注 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"),
),
这种方式是最简单的,直接使用即可。
Java面试Offer直通车