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

淡淡的烟草味﹌ 2022-12-28 07:48 130阅读 0赞

## 前言 ##

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：[flutter官网][flutter]

## 正文 ##

### 轮子 ###

*  轮子名称：sticky\_headers
 *  轮子概述：flutter给滚动内容添加粘性header组件.
 *  轮子作者：fluttercommunity.dev(官方)
 *  推荐指数：★★★★
 *  常用指数：★★★★
 *  效果预览：[![效果图][274c748ee2955d8e654273233b94ea36.gif]][274c748ee2955d8e654273233b94ea36.gif 1]
    
    [效果图][274c748ee2955d8e654273233b94ea36.gif 1]

### 安装 ###

yaml

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
</pre> </td> 
   <td> <pre>dependencies:
  sticky_headers: ^0.1.8+1
</pre> </td> 
  </tr> 
 </tbody> 
</table>

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
</pre> </td> 
   <td> <pre>import 'package:sticky_headers/sticky_headers.dart';
</pre> </td> 
  </tr> 
 </tbody> 
</table>

### 使用方法 ###

在列表项中，使用StickyHeader()，基本用法：（gif效果图中的默认效果）

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre> </td> 
   <td> <pre>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(//内容组件
                child: Image.network(imgs[index], fit: BoxFit.cover,width: double.infinity, height: 200.0),
            ),
        );
    }
)
</pre> </td> 
  </tr> 
 </tbody> 
</table>

在列表项中，使用StickyHeaderBuilder()来自定义更多的header效果和事件：（gif效果图中的自定义header效果）

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>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
</pre> </td> 
   <td> <pre>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: &lt;Widget&gt;[
                            new Expanded(
                                child: new Text('Header #$index',
                                    style: const TextStyle(color: Colors.white),
                                ),
                            ),
                            new Offstage(
                                offstage: stuckAmount &lt;= 0.0,
                                child: new Opacity(
                                    opacity: stuckAmount,
                                    child: new IconButton(
                                        icon: new Icon(Icons.favorite, color: Colors.white),
                                        onPressed: () =&gt;
                                            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),
            ),
        );
    }
)
</pre> </td> 
  </tr> 
 </tbody> 
</table>

在列表项中，使用StickyHeaderBuilder()，overlapHeaders=true,使header悬浮在内容上：（gif效果图中的header浮动）

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre> </td> 
   <td> <pre>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),
            ),
        );
    }
)
</pre> </td> 
  </tr> 
 </tbody> 
</table>

数据分组，在content中渲染子列表，形成类似RN的SectionList：（gif效果图中的SectionList效果）

dart

<table> 
 <tbody> 
  <tr> 
   <td> <pre>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
</pre> </td> 
   <td> <pre>class StickyHeadersDemo4 extends StatefulWidget {
    StickyHeadersDemo4({Key key}) : super(key: key);

@override
    _demoState createState() =&gt; _demoState();
}

class _demoState extends State&lt;StickyHeadersDemo4&gt; {

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: &lt;Widget&gt;[
                    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&lt;Widget&gt; buildGroup(List group){
        return group.map((item){
            return Container(
                height: 60,
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 20),
                child: Text(item),
            );
        }).toList();
    }
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

## 结尾 ##

*  轮子仓库地址：[https://pub.flutter-io.cn/packages/sticky\_headers][https_pub.flutter-io.cn_packages_sticky_headers]
 *  系列演示demo源码：[https://github.com/826327700/flutter\_plugins\_demo][https_github.com_826327700_flutter_plugins_demo]

[flutter]: https://flutter-io.cn/
[274c748ee2955d8e654273233b94ea36.gif]: https://img-blog.csdnimg.cn/img_convert/274c748ee2955d8e654273233b94ea36.gif
[274c748ee2955d8e654273233b94ea36.gif 1]: /images/20221120/23f480f8daa942bc8cba2c18d35d1ec4.png
[https_pub.flutter-io.cn_packages_sticky_headers]: https://pub.flutter-io.cn/packages/sticky_headers
[https_github.com_826327700_flutter_plugins_demo]: https://github.com/826327700/flutter_plugins_demo