效果
此效果参考自 twitter 与 gmail
实现原理
通过 Stack 组件,在最上层页面的状态栏位置用一个白色的容器占位,在列表滚动时,根据监听到的滚动位置动态调整其透明度。
代码
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,
)
],
);
}
}
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/280231.html