使用了flutter一段時間，越來越喜歡flutter了，flutter比我們想象中的強大。這篇文章介紹了怎么使用flutter來展示一個很漂亮的list，先看下效果圖。
image
樣式還是很漂亮的，下面我們一步一步完成這個小項目。
開發前準備
- 我們會用到加載網絡圖片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
