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