圆形头像组件

2021-02-20  本文已影响0人  91阿生

效果图:

image.png
class CircleImage extends StatelessWidget {
  final ImageProvider image;
  final double imageWH;
  final double borderWidth;
  final Color borderColor;

  CircleImage({
    @required this.image,
    this.imageWH = 70,
    this.borderWidth  = 1.0,
    this.borderColor = const Color(0xFF000000)
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: imageWH,
      height: imageWH,
      decoration: BoxDecoration(
        border: Border.all(
          width: borderWidth,
          color: borderColor
        ),
        borderRadius: BorderRadius.circular(imageWH*0.5),
        image: DecorationImage(
          image: image,
          fit: BoxFit.cover,
        )
      ),
    );
  }
}

使用:

CircleImage(
  image: AssetImage("assets/images/others_mi.jpg"),
  imageWH: 60,
  borderColor: Colors.white,
  borderWidth: 2,
),
上一篇 下一篇

猜你喜欢

热点阅读