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

运行结果:

相关推荐
纳兰瑞雪3 分钟前
nodeJs electron程式开发demo
开发语言·前端·javascript
why技术3 分钟前
可怕,看到一个冷血的算法。人心逐利,算法只会更聪明地逐利。
前端·后端·算法
祎直向前29 分钟前
linuxshell循环,条件分支语句
前端·chrome
LongtengGensSupreme29 分钟前
开放所有跨域 ----前端和后端
前端·后端·ajax·vue·api·jquery
我算哪枝小绿植30 分钟前
react实现日历拖拽效果
前端·react.js·前端框架
白粥33 分钟前
【HTML】文本格式化
前端·javascript·html
爱写程序的小高34 分钟前
npm版本降级、nvm切换node版本、webpack版本与vue版本不一致
前端·npm·node.js
sheji341636 分钟前
【开题答辩全过程】以 基于HTML5的移动端网页设计为例,包含答辩的问题和答案
前端·html·html5
jayaccc36 分钟前
前端缓存全解析:提升性能的关键策略
前端·缓存
前端不太难38 分钟前
Flutter 列表 rebuild 的真正边界在哪里
flutter·状态模式