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

运行结果:

相关推荐
二十一_8 分钟前
炸了!Claude Code 51万行源码全部泄露,我已经拿到了完整代码
前端·langchain·claude
RePeaT13 分钟前
npm 依赖版本号中 `^` 和 `~` 到底有什么区别?
前端·javascript·npm
DanCheOo15 分钟前
多模型适配:一套代码接 6 家 AI 厂商
前端·ai编程
米丘16 分钟前
Node.js 事件循环
前端·javascript·node.js
Forever7_16 分钟前
紧急!Axios 被投毒,3亿项目受到影响!教你怎么自查!
前端·axios
zzialx12317 分钟前
HarmonyOS:照片添加多样式的水印信息
前端
前端冒菜师22 分钟前
记一次AI全栈开发的过程
前端·ai编程
Giant10029 分钟前
深度玩转 Cursor Rules:让 AI 生成的代码 100% 符合团队规范
前端·面试
代码煮茶31 分钟前
Vue3 组件通信实战 | 8 种组件通信方式全解析
前端·vue.js
kyriewen32 分钟前
自定义事件:让代码之间也能“悄悄对话”
前端·javascript·面试