首先看效果
一、用到的组件及作用
Stack(实现堆叠效果)、MediaQuery(移除状态栏顶部内填充)、NotificationListener(监听滑动)、Opacity(透明度渐变控件)
二、实现
1、首先因为appbar是盖在内容上的,所以根布局就是Stack布局
2、因为要移除内容的padding实现侵入式效果,所以需要使用
MediaQuery.removePadding
且设置removeTop为true
3、因为要监听滑动所以child组件为NotificationListener,并判断depth==0,因为这个控件是监听整个布局的,只有当等于第一个listview的时候才是我们滑动的监听,最后把值赋值给Opacity
child: NotificationListener(
onNotification: (scrollNotification) {
if (scrollNotification is ScrollUpdateNotification &&
scrollNotification.depth == 0) {
//是滚动,且是列表滚动
_onScroll(scrollNotification.metrics.pixels);
return true;
} else {
return false;
}
},
4、创建Opacity实现透明度渐变
三、以下是完整代码
class HomePage extends StatefulWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _images = [
"*/id_1986_202108131552359122.jpg",
"*/202108121501016824.jpeg",
"*/202108121501016824.jpeg",
"*/202108121501011517.jpeg",
];
double _appBarAlpha = 0;
@override
void initState() {
super.initState();
}
_onScroll(offset) {
print("得到滚动值--->$offset");
double alpha = offset / 100;
if (alpha < 0) {
alpha = 0;
} else if (alpha > 1) {
alpha = 1;
}
setState(() {
_appBarAlpha = alpha;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
MediaQuery.removePadding(
context: context,
//移除顶部top
removeTop: true,
child: NotificationListener(
onNotification: (scrollNotification) {
if (scrollNotification is ScrollUpdateNotification &&
scrollNotification.depth == 0) {
//是滚动,且是列表滚动
_onScroll(scrollNotification.metrics.pixels);
return true;
} else {
return false;
}
},
child: ListView(
children: [
Container(
height: 169,
child: Swiper(
itemCount: _images.length,
autoplay: true,
onTap: (index) {
print("object$index");
},
itemBuilder: (BuildContext context, int index) {
return Image.network(
_images[index],
fit: BoxFit.cover,
);
},
//指示器
pagination: SwiperPagination(),
),
),
Container(
height: 800,
child: ListTile(
title: Text("我是标题"),
),
)
],
),
),
),
Opacity(
//控制透明度渐变控件
opacity: _appBarAlpha,
child: Container(
height: 80,
decoration: BoxDecoration(color: Colors.white),
child: Center(
child: Padding(
padding: EdgeInsets.only(top: 20),
child: Text("首页"),
),
),
),
)
],
),
);
}
}