這篇文章給大家介紹使用flutter怎么實(shí)現(xiàn)一個(gè)炫酷的list，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比泰和網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式泰和網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋泰和地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

assets:
 - assets/images/

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

assets:
 - assets/images/

appBar部分

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

需要將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來(lái)將Banner部分向上移動(dòng)，讓appBar全部展示在banner上面，這里給的offset為offset: Offset(0, -56) ，56為appBar的高度

下面的斜切造型需要使用ClipPath()來(lái)完成，用法有點(diǎn)像canvas，代碼如下：

class MyClipper extends CustomClipper {
 @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í)候帶有水墨綻開(kāi)的效果。點(diǎn)擊item的時(shí)候，我們使用Navigator.push跳轉(zhuǎn)到詳情頁(yè)面

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

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

關(guān)于使用flutter怎么實(shí)現(xiàn)一個(gè)炫酷的list就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。