【Flutter 元件集錄】CircleAvatar | 8 月更文挑戰

張風捷特烈發表於2021-08-16
Flutter元件
前言：

這是我參與8月更文挑戰的第 16 天，活動詳情檢視：8月更文挑戰。為應掘金的八月更文挑戰，我準備在本月挑選 31 個以前沒有介紹過的元件，進行全面分析和屬性介紹。這些文章將來會作為 Flutter 元件集錄 的重要素材。希望可以堅持下去，你的支援將是我最大的動力~

本系列元件文章列表
1.NotificationListener2.Dismissible3.Switch
4.Scrollbar5.ClipPath6.CupertinoActivityIndicator
7.Opacity8.FadeTransition9. AnimatedOpacity
10. FadeInImage11. Offstage12. TickerMode
13. Visibility14. Padding15. AnimatedContainer
16.CircleAvatar[本文]

一、認識 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 的使用方式到這裡就介紹完畢，那本文到這裡就結束了，謝謝觀看，明天見~

相關文章