flutter 效果实现 —— 无AppBar下列表滚动时状态栏透明度变化
效果
此效果参考自 twitter 与 gmail
实现原理
通过 Stack 组件,在最上层页面的状态栏位置用一个白色的容器占位,在列表滚动时,根据监听到的滚动位置动态调整其透明度。
PS:也可以借助 AppBar 实现,只要设置 Scaffold.extendBodyBehindAppBar 等于 true 与 AppBar.toolbarHeight 等于 0 即可。比如:
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.white.withOpacity(0.5),
toolbarHeight: 0,
),
body: ListView.builder(
代码
import 'package:flutter/material.dart';
class StatusBarOpacityPage extends StatefulWidget {
const StatusBarOpacityPage({Key? key}) : super(key: key);
@override
State<StatusBarOpacityPage> createState() => _StatusBarOpacityPageState();
}
class _StatusBarOpacityPageState extends State<StatusBarOpacityPage> with SingleTickerProviderStateMixin{
final ScrollController _scrollController = ScrollController();
double statusBarOpacity = 1;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
var screenPadding = MediaQuery.of(context).padding;
return Stack(
children: [
NotificationListener(
onNotification: (ScrollNotification notification) {
var pixels = notification.metrics.pixels;
final statusBarHeight= screenPadding.top;
if (pixels > 0 && pixels <= statusBarHeight) {
setState(() {
print(1 - pixels/statusBarHeight *0.5);
statusBarOpacity = 1 - pixels/statusBarHeight *0.3;
});
}
//若返回值为 true,则不会继续往上冒泡
return false;
},
child: ListView(
controller: _scrollController,
children: [
Container(
height: 1500,
color: Colors.yellow,
child: Text("Hello"),
)
],
),
),
Positioned(
child: Container(
color: Colors.white.withOpacity(statusBarOpacity),
height: screenPadding.top,
),
top: 0,
left: 0,
right: 0,
)
],
);
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!