前言
Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶(hù)界面。
IT界著名的尼古拉斯·高爾包曾說(shuō)：輪子是IT進(jìn)步的階梯！熱門(mén)的框架千篇一律，好用輪子萬(wàn)里挑一！Flutter作為這兩年開(kāi)始崛起的跨平臺(tái)開(kāi)發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足，但輪子的數(shù)量也已經(jīng)很多了。本系列文章挑選日常app開(kāi)發(fā)常用的輪子分享出來(lái)，給大家提高搬磚效率，同時(shí)也希望flutter的生態(tài)越來(lái)越完善，輪子越來(lái)越多。
本系列文章準(zhǔn)備了超過(guò)50個(gè)輪子推薦，工作原因，盡量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎(chǔ)的開(kāi)發(fā)者，入門(mén)請(qǐng)戳：flutter官網(wǎng)
正文
輪子
- 輪子名稱(chēng)：sticky_headers
- 輪子概述：flutter給滾動(dòng)內(nèi)容添加粘性header組件.
- 輪子作者：fluttercommunity.dev(官方)
- 推薦指數(shù)：★★★★
- 常用指數(shù)：★★★★
-
效果預(yù)覽：
sticky_headers (1).gif
安裝
dependencies:
sticky_headers: ^0.1.8+1
import 'package:sticky_headers/sticky_headers.dart';
使用方法
在列表項(xiàng)中，使用StickyHeader()，基本用法：（gif效果圖中的默認(rèn)效果）
ListView.builder(
itemCount: 12,
itemBuilder: (context, index) {
return StickyHeader(
header: Container( //header組件
height: 50.0,
color: Colors.blueGrey[700],
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
),
content: Container(//內(nèi)容組件
child: Image.network(imgs[index], fit: BoxFit.cover,width: double.infinity, height: 200.0),
),
);
}
)
在列表項(xiàng)中，使用StickyHeaderBuilder()來(lái)自定義更多的header效果和事件：（gif效果圖中的自定義header效果）
ListView.builder(
itemCount: 12,
itemBuilder: (context, index) {
return StickyHeaderBuilder(
builder: (BuildContext context, double stuckAmount) {
stuckAmount = 1.0 - stuckAmount.clamp(0.0, 1.0);
return new Container(
height: 50.0,
color: Color.lerp(Colors.blue[700], Colors.red[700], stuckAmount),
padding: new EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: new Row(
children: <Widget>[
new Expanded(
child: new Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
),
new Offstage(
offstage: stuckAmount <= 0.0,
child: new Opacity(
opacity: stuckAmount,
child: new IconButton(
icon: new Icon(Icons.favorite, color: Colors.white),
onPressed: () =>
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text('Favorite #$index'))
),
),
),
),
],
),
);
},
content: new Container(
child: new Image.network(imgs[index], fit: BoxFit.cover,
width: double.infinity, height: 200.0),
),
);
}
)
在列表項(xiàng)中，使用StickyHeaderBuilder()，overlapHeaders=true,使header懸浮在內(nèi)容上：（gif效果圖中的header浮動(dòng)）
ListView.builder(
itemCount: 12,
itemBuilder: (context, index) {
return new StickyHeaderBuilder(
overlapHeaders: true,
builder: (BuildContext context, double stuckAmount) {
stuckAmount = 1.0 - stuckAmount.clamp(0.0, 1.0);
return new Container(
height: 50.0,
color: Colors.grey[900].withOpacity(0.6 + stuckAmount * 0.4),
padding: new EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: new Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
);
},
content: new Container(
child: new Image.network(imgs[index], fit: BoxFit.cover,
width: double.infinity, height: 200.0),
),
);
}
)
數(shù)據(jù)分組，在content中渲染子列表，形成類(lèi)似RN的SectionList：（gif效果圖中的SectionList效果）
class StickyHeadersDemo4 extends StatefulWidget {
StickyHeadersDemo4({Key key}) : super(key: key);
@override
_demoState createState() => _demoState();
}
class _demoState extends State<StickyHeadersDemo4> {
List data=[{
"latter":"A",
"group":[
"A分組1","A分組1","A分組1","A分組1","A分組1","A分組1"
]
},{
"latter":"B",
"group":[
"B分組1","B分組1","B分組1","B分組1","B分組1","B分組1"
]
},{
"latter":"C",
"group":[
"C分組1","C分組1","C分組1","C分組1","C分組1","C分組1"
]
},{
"latter":"D",
"group":[
"D分組1","D分組1","D分組1","D分組1","D分組1","D分組1"
]
},{
"latter":"E",
"group":[
"E分組1","E分組1","E分組1","E分組1","E分組1","E分組1"
]
}];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("sticky_headers"),
actions: <Widget>[
GoWeb(pluginName: 'sticky_headers')
],
),
body: ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return StickyHeader(
header: Container(
height: 50.0,
color: Colors.blueGrey[700],
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(data[index]['latter'],
style: const TextStyle(color: Colors.white),
),
),
content: Column(
children: buildGroup(data[index]['group']),
),
);
}
)
);
}
List<Widget> buildGroup(List group){
return group.map((item){
return Container(
height: 60,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
child: Text(item),
);
}).toList();
}
}
結(jié)尾
- 輪子倉(cāng)庫(kù)地址：https://pub.flutter-io.cn/packages/sticky_headers
- 系列演示demo源碼：https://github.com/826327700/flutter_plugins_demo
