Flutter之CircleAvatar組件,圓形和圓角圖片

/**
 * 發(fā)現(xiàn)不添加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",
                      ),
                    ),
                  ),
                )
            ),
          ],
        ),

碼云地址:https://gitee.com/xgljh/Flutter.git

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容