前言：
這是我參與8月更文挑戰的第 16 天，活動詳情檢視：8月更文挑戰。為應掘金的八月更文挑戰，我準備在本月挑選 31 個以前沒有介紹過的元件，進行全面分析和屬性介紹。這些文章將來會作為 Flutter 元件集錄 的重要素材。希望可以堅持下去，你的支援將是我最大的動力~
一、認識 CircleAvatar 元件
首先看一下CircleAvatar 是什麼意思，可能很多人會把它當成一個圓形圖片裁剪的元件。其實原始碼中有介紹：它是代表使用者的一個圓。 拿下面的有道詞典來說，CircleAvatar 就是使用者的頭像。另外他可以設定顏色和子元件，這樣當頭像不存在時，一般以顏色和使用者名稱首字母顯示。
1.CircleAvatar 基本資訊
下面是 CircleAvatar 元件類的定義和 構造方法，可以看出它繼承自 StatelessWidget。配置引數主要是前/背景圖片和顏色，還可以設定半徑大小。
前景和背景圖片都是ImageProvider 物件，都對應一個 ImageErrorListener 進行監聽，如果圖片載入錯誤，會觸發該回撥。
final ImageProvider? backgroundImage;
final ImageProvider? foregroundImage;
final ImageErrorListener? onBackgroundImageError;
final ImageErrorListener? onForegroundImageError;
typedef ImageErrorListener = void Function(Object exception, StackTrace? stackTrace);
複製程式碼2. CircleAvatar 的使用
只要指定圖片資源，就能以圓形的展示出來，通過 radius 可以控制圓的大小。
class CircleAvatarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CircleAvatar(
backgroundImage: AssetImage('assets/images/icon_head.jpg'),
radius: 40,
);
}
}
複製程式碼比如當使用者沒有頭像時，可以通過 背景色 + 使用者首字母 作為頭像。這裡 foregroundColor 代表前景色，可以看到該顏色能作用於 child 對應的文字元件。
class CircleAvatarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CircleAvatar(
foregroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
radius: 25,
child: const Text( 'T', style: TextStyle(fontSize: 23),),
);
}
}
複製程式碼3. 前景圖片、背景圖片、背景色的關係
能顯示的只有一塊，那為什麼要設定 前景圖片、背景圖片、背景色 這麼多東西呢？這說明這三者肯定有顯示的優先順序。
通過原始碼註釋可以瞭解到，優先順序順序是:
foregroundImage > backgroundImage > backgroundColor
複製程式碼其實也不難理解，圖片的載入可能存在錯誤，尤其是網路圖片。CircleAvatar 作為使用者的標誌，發生圖片錯誤時，應該能有一些適應性。也就是說，如果 foregroundImage 出錯，則顯示 backgroundImage ,當 backgroundColor 出錯，則顯示 backgroundColor 。這樣有一個兜底的顯示，而非空白，或報錯，否則對使用者而言會產生困惑。
4. CircleAvatar 的動畫性
可能很多人都不知道，CircleAvatar 是具有動畫性的。比如下面，將 radius 從 25 改為 40 後重構元件，頭像是半徑動畫漸變達到新值。CircleAvatar 的動畫性比較弱，屬於預設的動畫，使用者無法指定時長、動畫曲線等動畫引數。這在一定程度上拋棄靈活性，使使用更加簡單。
下面通過原始碼我們能知道，CircleAvatar 本質上就是基於 AnimatedContainer 實現了，這個元件在上一篇已經介紹了，詳見： AnimatedContainer 。
二、CircleAvatar 的原始碼實現
它作為一個 StatelessWidget ，就說明其本身只是依賴於其他元件進行構建，邏輯都集中在 build 方法中，並不複雜。
在 build 方法一開始，會通過 Theme.of 獲取主體資料，根據暗亮模式設定文字顏色。
CircleAvatar 是基於 AnimatedContainer 元件實現的風能，其中前背景圖片被用於 decoration 和 foregroundDecoration 屬性中。子元件會居中，並且巢狀 IconTheme 和 DefaultTextStyle 處理文字和圖示預設顏色。預設的動畫時長為 kThemeChangeDuration，為200ms 。
const Duration kThemeChangeDuration = Duration(milliseconds: 200);
複製程式碼
CircleAvatar 是一個站在巨人的肩膀上，實現和使用都相對比較簡單元件。如果想要處理圓形的使用者頭像，可以考慮這個元件。那AnimatedContainer 的使用方式到這裡就介紹完畢，那本文到這裡就結束了，謝謝觀看，明天見~