flutter好用的輪子推薦十五-flutter給滾動內容新增粘性header元件

小小包子發表於2019-11-15

前言

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

結尾

相關文章