使用了flutter一段時間，越來越喜歡flutter了，flutter比我們想象中的強大。這篇文章介紹了怎麼使用flutter來展示一個很漂亮的list，先看下效果圖。
樣式還是很漂亮的，下面我們一步一步完成這個小專案。
開發前準備
- 我們會用到載入網路圖片FadeInImage這麼個widget，需要一個loading的icon，所以需要在pubspec.yaml裡配置下靜態資源，只有配置過的靜態資源才可以在專案中使用
assets:
- assets/images/
複製程式碼- 需要mock一些假資料和一些常用的常量，所以專門建了個constant.dart來管理
colors # 顏色
data # list的資料
# ...
複製程式碼appBar部分
- appBar需要透明的背景這樣才能將後面的圖片展示出來，看起來很像沉浸式。
- 需要將elevations設定為0，這樣就可以取消安卓特有的陰影效果，下面是程式碼:
Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
title: Text(
'flutter awesome list',
style: TextStyle(
color: Colors.white,
),
),
),
body: HomeBody(),
);
複製程式碼Banner部分
- 我們需要使用Transform.translate()這個weidget來將Banner部分向上移動，讓appBar全部展示在banner上面，這裡給的offset為offset: Offset(0, -56)，56為appBar的高度
- 下面的斜切造型需要使用ClipPath()來完成，用法有點像canvas，程式碼如下：
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path p = Path();
p.lineTo(size.width, 0.0);
p.lineTo(size.width, size.height / 4.75);
p.lineTo(0.0, size.height / 3.75);
p.close();
return p;
}
@override
bool shouldReclip(CustomClipper oldClipper) {
return true;
}
}
複製程式碼- 使用者資訊的展示用的widget是ListTile和CircleAvatar，用法也比較簡單，我直接貼程式碼了：
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(CONSTANT.userAvatar),
),
title: Text(
CONSTANT.userName,
style: CONSTANT.defaultTextStyle,
textScaleFactor: 1.5,
),
subtitle: Text(
CONSTANT.userProfile,
style: CONSTANT.defaultTextStyle,
),
)
複製程式碼列表展示部分
- 列表的展示使用的是ListView.builder()，兩個必傳引數itemCount和itemBuilder，前者控制列表的數量，後者控制item的展示，因為item的樣式還是比較多的，所以抽離成單獨的StatelessWidget元件：AwesomeListItem
- 我們用InkWell元件將AwesomeListItem包裹，InkWell是flutter自帶的元件，這個元件的特點是點選的時候帶有水墨綻開的效果。點選item的時候，我們使用Navigator.push跳轉到詳情頁面
- 圖片的展示，我們還是使用的FadeInImage，這種漸入效果的使用者體驗還是很不錯的。然後再使用Hero()來包裹FadeInImage，這樣能在頁面跳轉的時候提供圖片之間的過渡動畫，很是強大和炫酷
Hero(
tag: index,
child: FadeInImage(
image: NetworkImage(data.image),
fit: BoxFit.cover,
placeholder: AssetImage('assets/images/loading.gif'),
),
)
複製程式碼詳情頁面
最後就是詳情頁面的展示，這個頁面並沒有寫什麼樣式，展示了從列表頁跳轉過來時，圖片的過渡效果，有興趣的同學可以豐富下頁面的樣式和內容
結尾
- 部落格文章地址
- 文章中沒有張貼全部程式碼，感興趣的同學可以看下原始碼xch1029/awesomelist
- 顏色生成工具 來自這裡
- 圖片 來自這裡
- 受啟發於 FlutterAwesomeList