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();
    }
}
複製代碼

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/st…
• 系列演示demo源碼：github.com/826327700/f…