阅读 2565

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

前言

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

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

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

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

正文

轮子

  • 轮子名称: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效果)

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浮动)

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效果)

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

结尾