顶部滑动渐变 和 顶部导航
```python
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
const APPBAR_SCORLL_OFFSET =100;
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _imageUrls = [
'https://qnwww2.autoimg.cn/newsdfs/g26/M09/39/1A/autohomecar__ChsEnF3LyfyAPLEOAAPPcEtAcsc635.jpg',
'https://img2.autoimg.cn/admdfs/g1/M04/0C/D7/ChsEmV236AWAeVxxAADNmEFdNug314.jpg',
'https://qnwww2.autoimg.cn/newsdfs/g25/M03/94/0C/autohomecar__ChsEel3Lcj6Ab6fcAAXx3D2fNSg287.jpg',
'https://qnwww2.autoimg.cn/newsdfs/g1/M09/4F/91/autohomecar__ChsEj13LyA6AVsDHAAexjI07sWo824.jpg'
];
// 定义透明度的变量
double appBarAlpha = 0;
_onScroll(offset) {
double alpha = offset/APPBAR_SCORLL_OFFSET;
if(alpha<0){
alpha = 0;
}else if(alpha > 1){
alpha = 1;
}
setState(() {
appBarAlpha = alpha;
});
}
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
return Scaffold(
body: Stack(
children: <Widget>[
MediaQuery.removePadding(
removeTop: true,
context: context,
child: NotificationListener(
onNotification: (scrollNotification) {
if (scrollNotification is ScrollUpdateNotification &&
scrollNotification.depth == 0) {
// 滚动且列表滚动的时候
_onScroll(scrollNotification.metrics.pixels);
}
},
child: ListView(
children: <Widget>[
Container(
/**
* 在需要的页面使用 屏幕适配
*/
width: ScreenUtil().setWidth(750),
height: ScreenUtil().setHeight(400),
child: Swiper(
itemCount: _imageUrls.length,
autoplay: true,
itemBuilder: (BuildContext context, int index) {
return Image.network(
_imageUrls[index],
fit: BoxFit.cover,
);
},
pagination: SwiperPagination(),
),
),
Container(
height: 800.0,
child: ListTile(
title: Text('哈哈'),
),
)
],
),
)),
Opacity(
opacity:appBarAlpha,
child: Container(
height: 60,
decoration: BoxDecoration(
color: Colors.white
),
child: Center(
child: Padding(
padding: EdgeInsets.only(top:20),
child: Text('首页'),
),
),
),
)
],
));
}
}