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

运行结果:

相关推荐
之歆10 分钟前
Day21_电商详情页核心技术实战:从LESS预处理到复杂交互实现
开发语言·前端·javascript·css·交互·less
海鸥两三19 分钟前
基于 Vue 3 + 高德地图的网格规划系统实战(有源码)
前端·javascript·vue.js
丷丩28 分钟前
MapLibre GL JS第11课:获取鼠标指针坐标
前端·javascript·gis·地图·mapbox·maplibre gl js
代码AI弗森36 分钟前
前端周刊第 467 期[特殊字符] 本期精选目录
前端
随便的名字37 分钟前
前端路由的底层逻辑:URL 中 # 和 ? 的区别与关系详解
前端
kongba00738 分钟前
ttyd Web终端安装指南(OpenCloudOS 9)
linux·前端
zhoumeina9939 分钟前
前端串行合成流程 + 每张图上传接口
前端·状态模式
风骏时光牛马40 分钟前
Swift 基于MVVM架构实现完整列表数据展示与交互功能实战案例
前端
就叫_这个吧1 小时前
JavaScript基础数据类型、运算符、数组、函数的定义及DOM方式应用
开发语言·前端·javascript
作业逆流成河1 小时前
别再一次性重构枚举了:如何把一个真实后台项目的状态字典,渐进式迁移到enum-plus?
前端·javascript·开源