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

运行结果:

相关推荐
念九_ysl7 分钟前
使用 Vue 快速集成 FullCalendar 日历组件教程
前端·javascript·vue.js
造夢先森18 分钟前
SpringAI+MCP协议 实战
前端·javascript·easyui
bst@微胖子44 分钟前
Flutter之页面布局二
android·javascript·flutter
恋猫de小郭1 小时前
你为什么需要了解 Dart AST?一个简单的 bug 带你快速认识下 Dart Kernel AST
android·前端·flutter
excel1 小时前
webpack 格式化模块 第 二 节
前端
excel1 小时前
webpack 格式化模块 第 一 节
前端
好_快1 小时前
Lodash源码阅读-findIndex
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-baseIteratee
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-getIteratee
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-property
前端·javascript·源码阅读