Flutter学习笔记之-圆形头像实现方式

开发中如何实现类似圆形图片

Container+BoxDecoration来实现圆角图像 class DemoWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( width: 100, height: 100, decoration: BoxDecoration( image: DecorationImage(image: NetworkImage("https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg")), borderRadius: BorderRadius.circular(50), ), ) ); } }

Container + CircleAvatar实现圆角头像 class DemoWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( // 包裹设置头像大小 width: 100, height: 100, child: CircleAvatar( backgroundImage: NetworkImage("https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg"), child: Container( // 控制name位置 child: Text("name", style: TextStyle(color: Colors.black),), alignment: Alignment(0.0, 2.0), ), ), ); } }

ClipOval显示圆角头像 class DemoWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ClipOval( child: Image.network( "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg", width: 100, height: 100, ), ); } } ClipRRect 实现圆角图片 class DemoWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ClipRRect( borderRadius: BorderRadius.circular(50), child: Image.network( "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1636778189,1177027796&fm=26&gp=0.jpg", width: 100, height: 100, ), ); } }