flutter给滚动内容添加粘性header组件

2023-12-18 14:18

本文主要是介绍flutter给滚动内容添加粘性header组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

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

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

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

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

正文

轮子

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

    效果图

安装

yaml

1
2
dependencies:sticky_headers: ^0.1.8+1

dart

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

使用方法

在列表项中,使用StickyHeader(),基本用法:(gif效果图中的默认效果)

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

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

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

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

数据分组,在content中渲染子列表,形成类似RN的SectionList:(gif效果图中的SectionList效果)

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分组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"]}];@overrideWidget 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();}
}

结尾

  • 轮子仓库地址:https://pub.flutter-io.cn/packages/sticky_headers
  • 系列演示demo源码:https://github.com/826327700/flutter_plugins_demo

这篇关于flutter给滚动内容添加粘性header组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/508716

相关文章

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

Java如何将文件内容转换为MD5哈希值

《Java如何将文件内容转换为MD5哈希值》:本文主要介绍Java如何将文件内容转换为MD5哈希值的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java文件内容转换为MD5哈希值一个完整的Java示例代码代码解释注意事项总结Java文件内容转换为MD5

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》:本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果,不能实现滚动内容中的字进行不同颜色的更改,下面实现一个无缝衔接的滚动

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

使用Python自动化生成PPT并结合LLM生成内容的代码解析

《使用Python自动化生成PPT并结合LLM生成内容的代码解析》PowerPoint是常用的文档工具,但手动设计和排版耗时耗力,本文将展示如何通过Python自动化提取PPT样式并生成新PPT,同时... 目录核心代码解析1. 提取 PPT 样式到 jsON关键步骤:代码片段:2. 应用 JSON 样式到

全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应

《全解析CSSGrid的auto-fill和auto-fit内容自适应》:本文主要介绍了全解析CSSGrid的auto-fill和auto-fit内容自适应的相关资料,详细内容请阅读本文,希望能对你有所帮助... css  Grid 的 auto-fill 和 auto-fit/* 父元素 */.gri