当前位置:网站首页>Fluent adds sticky header components to scrolling content

Fluent adds sticky header components to scrolling content

2020-12-16 08:47:23 osc_ 22rhv8iu

Preface

Flutter It's Google's mobile UI frame , You can quickly iOS and Android Build a high quality native user interface on .

IT Nicholas, who is famous in the world · Galbag once said : The wheel is IT The ladder of progress ! Hot frames are the same , It's easy to choose one out of ten thousand wheels !Flutter As a cross platform development framework that started to rise in the past two years , Compared with other mature frameworks, the third-party ecosystem is still slightly inadequate , But there are already a lot of wheels . This series selects daily app Develop common wheels to share , To improve the efficiency of brick handling , At the same time, I hope flutter Our ecology is becoming more and more perfect , More and more wheels .

This series of articles prepares more than 50 Wheel recommendation , Work reason , Try to do everything possible 1-2 An article came out of the sky .

tip: This series of articles is suitable for the existing parts flutter Basic developers , To get started, please poke :flutter Official website

Text

wheel

  • Name of wheel :sticky_headers
  • Wheel overview :flutter Add stickiness to scrolling content header Components .
  • The wheel author :fluttercommunity.dev( official )
  • Recommend index :****
  • Commonly used index :****
  • Results the preview : design sketch

    design sketch

install

yaml

1
2
dependencies:
  sticky_headers: ^0.1.8+1

dart

1
import 'package:sticky_headers/sticky_headers.dart';

Usage method

In the list item , Use StickyHeader(), Basic usage :(gif Default effect in renderings )

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ListView.builder(
    itemCount: 12,
    itemBuilder: (context, index) {
        return StickyHeader(
            header: Container( //header Components 
                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(// Content components 
                child: Image.network(imgs[index], fit: BoxFit.cover,width: double.infinity, height: 200.0),
            ),
        );
    }
)

In the list item , Use StickyHeaderBuilder() From defining more header Effects and events :(gif Custom in renderings header effect )

dart

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
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),
            ),
        );
    }
)

In the list item , Use StickyHeaderBuilder(),overlapHeaders=true, send header Floating on the content :(gif In the renderings header float )

dart

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

The data packet , stay content Rendering sublist in , Form similar RN Of SectionList:(gif In the renderings SectionList effect )

dart

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
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 grouping 1","A grouping 1","A grouping 1","A grouping 1","A grouping 1","A grouping 1"
        ]
    },{
        "latter":"B",
        "group":[
            "B grouping 1","B grouping 1","B grouping 1","B grouping 1","B grouping 1","B grouping 1"
        ]
    },{
        "latter":"C",
        "group":[
            "C grouping 1","C grouping 1","C grouping 1","C grouping 1","C grouping 1","C grouping 1"
        ]
    },{
        "latter":"D",
        "group":[
            "D grouping 1","D grouping 1","D grouping 1","D grouping 1","D grouping 1","D grouping 1"
        ]
    },{
        "latter":"E",
        "group":[
            "E grouping 1","E grouping 1","E grouping 1","E grouping 1","E grouping 1","E grouping 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();
    }
}

ending

版权声明
本文为[osc_ 22rhv8iu]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/202012160846336566.html

随机推荐