Flutter中的圆角和圆形效果
Flutter中的圆角和圆形效果第一种:以图片为容器背景,设置容器四角的圆角角度第二种 ClipRRect 裁剪矩形四角 可自定义圆角度数第三种 ClipOval 直接就是圆形第四种 CircleAvatar拓展 自定义裁剪样式 ClipPath 路径裁剪第一种:以图片为容器背景,设置容器四角的圆角角度Container(margin: EdgeInsets.only(right: 10....
·
Flutter中的圆角和圆形效果
第一种:以图片为容器背景,设置容器四角的圆角角度
Container(
margin: EdgeInsets.only(right: 10.0),
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
shape: BoxShape.rectangle, //可以设置角度,BoxShape.circle直接圆形
borderRadius: BorderRadius.circular(5.0),
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
"image/a001.jpg",
),
)
),
),
第二种 ClipRRect 裁剪矩形四角 可自定义圆角度数
Container(
alignment: Alignment.center,
child: ClipRRect(
borderRadius:BorderRadius.circular(6.0),
child: Image.asset(
"image/a001.jpg",
),
),
);
第三种 ClipOval 直接就是圆形
Container(
alignment: Alignment.center,
child: ClipOval(
child: Image.asset(
"image/a001.jpg",
),
),
);
第四种 CircleAvatar
Container(
alignment: Alignment.center,
child: CircleAvatar(
radius:6.0,
backgroundImage: AssetImage( //背景图 child可以添加内容
"image/a001.jpg",
),
),
);
拓展 自定义裁剪样式 ClipPath 路径裁剪
更多推荐
已为社区贡献1条内容
所有评论(0)