前言

使用了flutter一段時(shí)間，越來越喜歡flutter了，flutter比我們想象中的強(qiáng)大。這篇文章介紹了怎么使用flutter來展示一個(gè)很漂亮的list，先看下效果圖。

樣式還是很漂亮的，下面我們一步一步完成這個(gè)小項(xiàng)目。

開發(fā)前準(zhǔn)備

我們會(huì)用到加載網(wǎng)絡(luò)圖片F(xiàn)adeInImage這么個(gè)widget，需要一個(gè)loading的icon，所以需要在pubspec.yaml里配置下靜態(tài)資源，只有配置過的靜態(tài)資源才可以在項(xiàng)目中使用

assets:
 - assets/images/

需要mock一些假數(shù)據(jù)和一些常用的常量，所以專門建了個(gè)constant.dart來管理

assets:
 - assets/images/

appBar部分

appBar需要透明的背景這樣才能將后面的圖片展示出來，看起來很像沉浸式。

需要將elevations設(shè)置為0，這樣就可以取消安卓特有的陰影效果，下面是代碼:

Scaffold(
 appBar: AppBar(
 backgroundColor: Colors.transparent,
 elevation: 0,
 title: Text(
 'flutter awesome list',
 style: TextStyle(
 color: Colors.white,
 ),
 ),
 ),
 body: HomeBody(),
);

Banner部分

我們需要使用Transform.translate()這個(gè)weidget來將Banner部分向上移動(dòng)，讓appBar全部展示在banner上面，這里給的offset為offset: Offset(0, -56) ，56為appBar的高度

下面的斜切造型需要使用ClipPath()來完成，用法有點(diǎn)像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，用法也比較簡(jiǎn)單，我直接貼代碼了：

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() ，兩個(gè)必傳參數(shù)itemCount和itemBuilder，前者控制列表的數(shù)量，后者控制item的展示，因?yàn)閕tem的樣式還是比較多的，所以抽離成單獨(dú)的StatelessWidget組件：AwesomeListItem

我們用InkWell組件將AwesomeListItem包裹，InkWell是flutter自帶的組件，這個(gè)組件的特點(diǎn)是點(diǎn)擊的時(shí)候帶有水墨綻開的效果。點(diǎn)擊item的時(shí)候，我們使用Navigator.push跳轉(zhuǎn)到詳情頁面

圖片的展示，我們還是使用的FadeInImage，這種漸入效果的用戶體驗(yàn)還是很不錯(cuò)的。然后再使用Hero()來包裹FadeInImage，這樣能在頁面跳轉(zhuǎn)的時(shí)候提供圖片之間的過渡動(dòng)畫，很是強(qiáng)大和炫酷

Hero(
 tag: index,
 child: FadeInImage(
 image: NetworkImage(data.image),
 fit: BoxFit.cover,
 placeholder: AssetImage('assets/images/loading.gif'),
 ),
)

詳情頁面

最后就是詳情頁面的展示，這個(gè)頁面并沒有寫什么樣式，展示了從列表頁跳轉(zhuǎn)過來時(shí)，圖片的過渡效果，有興趣的同學(xué)可以豐富下頁面的樣式和內(nèi)容

感興趣的同學(xué)可以看下源碼xch1029/awesomelist

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論