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控件来设置子控件的透明度

运行结果:

相关推荐
Pedantic9 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端
飘尘9 小时前
前端转型全栈(Java后端)的快速上手指引
前端·后端·全栈
一颗烂土豆9 小时前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师10 小时前
AI Agent 接浏览器任务,先别让它一路点到底
前端·后端
雨季mo浅忆10 小时前
VSCode自动格式化三要素
前端
爱勇宝11 小时前
深扒 Anthropic 1680 位工程师简历:应届生几乎没机会,AI 公司最缺的不是博士
前端·后端·程序员
kyriewen12 小时前
同事每天催我 Code Review,我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
user205855615181314 小时前
Windows 项目安装时报 `node-sass` 错误,如何快速处理
前端
LiaCode14 小时前
Redis 在生产项目的使用
前端·后端