第九回：如何使用 CircleAvatar Widget

我们在上一章回中介绍了Stack Widget,本章回中将介绍 CircleAvatar这种Widget，闲话休提，让我们一起Talk Flutter吧。

概念介绍

在上一回中我们使用了CircleAvatar Widget,之前也没有介绍过此Widget,因此有些看官希望对它做一些介绍。它是一种图片类widget.主要用来显示图形图片， 通常用来当作用户的圆形头像。

使用方法

CircleAvatar Widget和其它的Widget一样使用类的属性(或者叫成员变量）来控制界面显示，我们只需要给构造方法中的命名参数赋值就可以。常用的属性如下：

backgroundColor  用来显示背景的颜色
backgroundImage  用来显示背景图片
foregroundColor  用来显示前景的颜色
foregroundImage  用来显示前景图片
radius           圆形的着么，主要用来控制圆形的大小
child            用来包含子widget，比如Text等；

这么多属性如果都设置的话它不会同时显示，显示顺序依次是：前景图片，背景图片，景景颜色，前景颜色。

示例代码

CircleAvatar(
          backgroundColor: Colors.blueAccent,
          backgroundImage: AssetImage("images/ax.png"),
          foregroundColor: Colors.black87,
          foregroundImage: AssetImage("images/ax.png"),
          radius: 80,
          child: Text("avatar",
            style: TextStyle(
                color: Colors.white,
                fontSize: 20),
          ),
        ),

上面的代码是一个使用示例，它在上一章回代码的基础上添加了前景图片和child，使用该代码替换掉上一章回中CircleAvatar类中的代码，编译并且运行程序可以得到一个圆形的图片，图片背景是蓝色，中间是白色的avatar文字。因为前景和背景图片在项目中不存在，无法显示，我们在该widget中添加了Text子widget。我在这里就演示程序的运行结果了，建议大家自己动手去试试。

看官们，关于CircleAvatar Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!