Flutter 中的 CircleAvatar 小部件：全面指南
在 Flutter 中，CircleAvatar 是一個用于顯示頭像的圓形控件，通常包含一個圖標、圖片或者一個簡單的文本字符。它在設計上與 Material Design 指南中的頭像規范相匹配，常用于展示用戶信息，如在聊天應用、用戶列表或個人資料頁面中。
基礎用法
CircleAvatar 最基本的用法是顯示一個包含單個字母的圓形頭像：
CircleAvatar(child: Text('A'),
)
這將創建一個圓形頭像，其中包含一個 “A” 字符。
使用圖片
CircleAvatar 也可以用來顯示圖片，通過 Image 或 NetworkImage：
CircleAvatar(backgroundImage: Image.asset('assets/images/profile_pic.png').image,
)
或者從網絡加載圖片：
CircleAvatar(backgroundImage: NetworkImage('https://example.com/profile_pic.png'),
)
定制化屬性
CircleAvatar 提供了一些屬性來定制頭像的外觀：
半徑
radius: 設置頭像的半徑。
CircleAvatar(radius: 30.0,child: Text('A'),
)
邊框
border: 設置頭像的邊框。
CircleAvatar(border: Border.all(width: 2.0, color: Colors.black),child: Text('A'),
)
背景顏色
backgroundColor: 設置頭像的背景顏色。
CircleAvatar(backgroundColor: Colors.blue,child: Text('A'),
)
前景色
foregroundColor: 設置頭像的前景色，如文本顏色或圖標顏色。
CircleAvatar(foregroundColor: Colors.white,child: Text('A'),
)
實例：顯示用戶頭像
下面是一個使用 CircleAvatar 顯示用戶頭像的實例：
CircleAvatar(radius: 50.0,child: Text('DH'),
)
實例：使用圖標作為頭像
使用圖標作為頭像是 CircleAvatar 的另一個常見用法：
CircleAvatar(radius: 50.0,child: Icon(Icons.account_circle),
)
實例：自定義樣式的頭像
你可以結合 Stack 和 CircleAvatar 來創建自定義樣式的頭像，例如帶有在線狀態標識的頭像：
Stack(clipBehavior: Clip.none, // 允許子控件超出邊界children: <Widget>[CircleAvatar(radius: 50.0,child: Image.asset('assets/images/profile_pic.png'),),Positioned(bottom: 8.0,right: 8.0,child: CircleAvatar(radius: 12.0,backgroundColor: Colors.green,child: Icon(Icons.check),),),],
)
結語
CircleAvatar 是 Flutter 中一個簡單而強大的小部件，它提供了一種快速且一致的方式來展示用戶頭像。無論是顯示單個字符、圖片還是圖標，CircleAvatar 都能很好地融入 Material Design 的風格中。掌握 CircleAvatar 的使用，可以幫助你創建出既美觀又具有良好用戶體驗的用戶界面。
)
