flutter好用的轮子推荐十五-flutter给滚动内容添加粘性header组件

前言

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

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

本系列文章准备了超过50个轮子推荐，工做缘由，尽可能每1-2天出一篇文章。markdown

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

正文

轮子

轮子名称：sticky_headers
轮子概述：flutter给滚动内容添加粘性header组件.
轮子做者：fluttercommunity.dev(官方)
推荐指数：★★★★
经常使用指数：★★★★
效果预览：

如原图加载失败，点击查看原图

安装

dependencies:
 sticky_headers: ^0.1.8+1
复制代码

import 'package:sticky_headers/sticky_headers.dart';
复制代码

使用方法

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

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),
            ),
        );
    }
)
复制代码

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

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),
            ),
        );
    }
)
复制代码

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

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),
            ),
        );
    }
)
复制代码

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

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();
    }
}
复制代码

结尾

轮子仓库地址：pub.flutter-io.cn/packages/st…
系列演示demo源码：github.com/826327700/f…