flutter圆角头像

2024-05-23  本文已影响0人  PlatoJobs

flutter圆角头像的几种实现方式


class DefaultTextWidget extends StatelessWidget {
  const DefaultTextWidget({super.key});
  final imageurl =
      "https://img2.baidu.com/it/u=3227619927,365499885&fm=253&fmt=auto&app=120&f=JPEG?w=938&h=500";
  @override
  Widget build(BuildContext context) {
    return  Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
       const  Text("data", style: TextStyle(color: Colors.red)),
        ClipOval(
           child: Image.network(
          imageurl,
          fit: BoxFit.cover,
          width: 150,
          height: 150,
        )),
        //圆角图片
        ClipRRect(
           borderRadius: BorderRadius.circular(50),
           child: Image.network(
          imageurl,
          fit: BoxFit.cover,
          width: 150,
          height: 150,
        ),
        ),
        Container(
          width: 150,
          height: 150,
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(75)
          ),
          child: Image.network(imageurl,fit: BoxFit.cover,),

        ),
      ],
    );
  }
}




上一篇 下一篇

猜你喜欢

热点阅读