flutter给滚动内容添加粘性header组件

1
2

dependencies:sticky_headers: ^0.1.8&＃43;1

1

import &＃39;package:sticky_headers/sticky_headers.dart&＃39;;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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(&＃39;Header #$index&＃39;,style: const TextStyle(color: Colors.white),),),content: Container(//内容组件child: Image.network(imgs[index], fit: BoxFit.cover,width: double.infinity, height: 200.0),),);}
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

ListView.builder(itemCount: 12,itemBuilder: (context, index) {return StickyHeaderBuilder(builder: (BuildContext context, double stuckAmount) {stuckAmount &＃61; 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: [new Expanded(child: new Text(&＃39;Header #$index&＃39;,style: const TextStyle(color: Colors.white),),),new Offstage(offstage: stuckAmount <&＃61; 0.0,child: new Opacity(opacity: stuckAmount,child: new IconButton(icon: new Icon(Icons.favorite, color: Colors.white),onPressed: () &＃61;>Scaffold.of(context).showSnackBar(new SnackBar(content: new Text(&＃39;Favorite #$index&＃39;))),),),),],),);},content: new Container(child: new Image.network(imgs[index], fit: BoxFit.cover,width: double.infinity, height: 200.0),),);}
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

ListView.builder(itemCount: 12,itemBuilder: (context, index) {return new StickyHeaderBuilder(overlapHeaders: true,builder: (BuildContext context, double stuckAmount) {stuckAmount &＃61; 1.0 - stuckAmount.clamp(0.0, 1.0);return new Container(height: 50.0,color: Colors.grey[900].withOpacity(0.6 &＃43; stuckAmount * 0.4),padding: new EdgeInsets.symmetric(horizontal: 16.0),alignment: Alignment.centerLeft,child: new Text(&＃39;Header #$index&＃39;,style: const TextStyle(color: Colors.white),),);},content: new Container(child: new Image.network(imgs[index], fit: BoxFit.cover,width: double.infinity, height: 200.0),),);}
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

class StickyHeadersDemo4 extends StatefulWidget {StickyHeadersDemo4({Key key}) : super(key: key);&＃64;override_demoState createState() &＃61;> _demoState();
}class _demoState extends State {List data&＃61;[{"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"]}];&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("sticky_headers"),actions: [GoWeb(pluginName: &＃39;sticky_headers&＃39;)],),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][&＃39;latter&＃39;],style: const TextStyle(color: Colors.white),),),content: Column(children: buildGroup(data[index][&＃39;group&＃39;]),),);}));}List buildGroup(List group){return group.map((item){return Container(height: 60,alignment: Alignment.centerLeft,padding: EdgeInsets.only(left: 20),child: Text(item),);}).toList();}
}