Flutter之CircleAvatar组件，圆形和圆角图片

/**
 * 发现不添加Align时，CircleAvatar并没有显示为圆形，
 * 设置child为要显示的url时，并不能显示为圆形，只有设置backgroundColor或者backgroundImage时才显示为了圆形
 * radius和minRadius与maxRadius不能同时使用;
 * ClipOval不在Align里面时也不能显示为圆形，ClipOval中image设置为fit: BoxFit.fill才能显示为圆形；
 * BoxDecoration不在Align里面时也不能显示为圆形，BoxDecoration中image设置为fit: BoxFit.fill才能显示为圆形；
 *
    const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,//背景色，相当于加载中或加载失败的占位图
    this.backgroundImage,//背景图，相当于加载中或加载失败的占位图
    this.foregroundColor,//前景色，
    this.radius,
    this.minRadius,
    this.maxRadius,
    })
 */

body: ListView(
  padding: EdgeInsets.all(20.0),
  children: <Widget>[
    CircleAvatar(
      child: Image.network(
          "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
//                backgroundColor: Color(0xffff0000),
//              backgroundImage: NetworkImage(
//                  "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
      radius: 40.0,
//              foregroundColor: Color(0x55000000),
    ),
    Align(
      child: CircleAvatar(
        child: Image.network(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
//                backgroundImage: new NetworkImage(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
        backgroundColor: Color(0xffff0000),
        radius: 40.0,
      ),
    ),
    //圆行图片
    Align(
      child: CircleAvatar(
//                child: Image.network(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
        backgroundImage: NetworkImage(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
        backgroundColor: Color(0xffff0000),
        radius: 40.0,
      ),
    ),
    Align(
      child: CircleAvatar(
//                child: Image.network(
//                    "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
        backgroundImage: NetworkImage(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
        foregroundColor: Color(0xffff0000),
        radius: 40.0,
      ),
    ),
    Align(
      child: ClipOval(
        child: SizedBox(
          width: 80.0,
          height: 80.0,
          child: Image.network(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
            fit: BoxFit.fill,),
        ),
      ),
    ),
    Align(
        child: Container(
          width: 80.0,
          height: 80.0,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(
                "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
              ),
            ),
          ),
        )
    ),
    //圆角图片
    Align(
      child: Container(
        margin: EdgeInsets.only(top: 10.0),
        width: 80.0,
        height: 80.0,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(5.0),
          child: Image.network(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
            fit: BoxFit.fill,
          ),
        ),
      ),
    ),
    Align(
        child: Container(
          margin: EdgeInsets.only(top: 10.0),
          width: 80.0,
          height: 100.0,
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(5.0),
            image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(
                "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
              ),
            ),
          ),
        )
    ),
  ],
),

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！