Flutter中的圆角和圆形效果

最新推荐文章于 2024-07-26 15:38:13 发布

深度物联网

最新推荐文章于 2024-07-26 15:38:13 发布

阅读量1.5w

点赞数 3

分类专栏： Flutter 文章标签： flutter圆角 flutter头像 flutter头像圆角

转载或者复制必究责任

本文链接：https://blog.csdn.net/changzengli/article/details/92782681

版权

Flutter 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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