Flutter 自定义AppBar实现滚动渐变

1、使用ListView实现上下滚动。

2、使用Stack:允许将其子部件放在彼此的顶部,第一个子部件将放置在底部。所以AppBar,写在ListView下面。

3、MediaQuery.removePadding:当使用ListView的时候发现,顶部有块默认的Padding,MediaQuery.removePadding来删除默认的Padding。

4、NotificationListener:监听ListView滚动事件。

Notification是Flutter重要的状态管理机制之一,它可以很方便的显现子widget通知其父widget自身的某些状态发生了改变,它和另一种状态管理部件 InheritedWidget有些类似,InheritedWidget是父widget通知子widget,Notification是子widget通知父widget。

5、使用Opacity控件来设置子控件的透明度

运行结果:

相关推荐
To_OC11 小时前
别再瞎写 React Router!7 个高频踩坑点一次性讲透
前端·javascript·react.js
年小个大13 小时前
受 go-zero 启发,我给 Flutter 写了一套 CLI 脚手架
android·flutter·架构
岭南灯火13 小时前
前端通用交互式几何编辑器的开发经验
前端·设计模式·架构
岭南灯火13 小时前
前端通用交互式几何编辑器的设计法则 7 - 设计模式与原则
前端·设计模式·架构
岭南灯火13 小时前
前端通用交互式几何编辑器的设计法则 4 - 绘制、悬停与编辑
前端·设计模式·架构
岭南灯火13 小时前
前端通用交互式几何编辑器的设计法则 3 - 数据对象的设计
前端·javascript·架构
Jackson__13 小时前
从 LLM 到 Agent:一篇文章搞懂 AI 圈热词!
前端·agent·ai编程
岭南灯火13 小时前
前端通用交互式几何编辑器的设计法则 2 - 交互事件流
前端·javascript·架构
岭南灯火13 小时前
前端通用交互式几何编辑器的设计法则 6 - 配套设施与工程化
前端·设计模式·架构
岭南灯火13 小时前
前端通用交互式几何编辑器的设计法则 5 - 辅助元素的设计
前端·设计模式·架构