效果图(图不太好,凑合看吧)

代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutterapp/utils/log_util.dart';
const APPBAR_SCROLL_OFFSET = 100; //设置滑动变化的偏移量
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _imageUrls = [
'http://www.yijuzg.com/img/ggimg/096fe739-2d46-4684-9b9f-99fdb801f691-20190228051421.jpg',
'http://www.yijuzg.com/img/ggimg/9ea4e197-aa5e-4fef-aaa2-93392eb1162e-20190110092133.jpg',
'http://www.yijuzg.com/img/ggimg/90251d46-99ac-4841-ba91-f5a10def7c53-20190110101218.jpg'
];
double appBarAlpha = 0;
/// 滚动的距离
_onScroll(offset) {
double alpha = offset / APPBAR_SCROLL_OFFSET;
if (alpha < 0) {
alpha = 0;
} else if (alpha > 1) {
alpha = 1;
}
setState(() {
appBarAlpha = alpha;
});
// print(appBarAlpha);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
MediaQuery.removePadding(//移除ListView得padding
removeTop: true,//移除Top
context: context,
//实现对列表得监听 -- 接收 onNotification 得回调,每次滚动得时候都会回调这个函数
child: NotificationListener(
// ignore: missing_return
onNotification:(scrollNotification) {
if (scrollNotification is ScrollUpdateNotification &&
scrollNotification.depth == 0) {//1、只监测ListView的滚动(深度设为0),2、监测滚动的时候(ScrollUpdateNotification)
_onScroll(scrollNotification.metrics.pixels);
}
},
child: mainWidget()
)
),
Opacity(///改变透明度都可以使用 Opacity 将其包裹
opacity: appBarAlpha,
child: topWidget()//顶部导航栏 也可以是自定义组件
)
],
),
);
}
Widget topWidget(){
return Container(
height: 80,
decoration: BoxDecoration(
border:Border(
bottom:BorderSide(
width: 1,
color: Color(0xffe5e5e5))
)
),
child: Center(
child: Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
'首页',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
);
}
Widget mainWidget(){
return ListView(//为了实现渐变
children: <Widget>[
//轮播图
_homeSwiperWidget(),
Container(
height: 800,
child: ListTile(
title: Text('哈哈'),
),
)
],
);
}
/// 轮播图
Widget _homeSwiperWidget(){
return Container(
height: 160,
child: Swiper(
itemCount: _imageUrls.length,
autoplay: true,//自动播放
pagination: SwiperPagination(),//轮播图小点
itemBuilder: (BuildContext context,int index){
return Image.network(
_imageUrls[index],
fit: BoxFit.fill,
);
},
onTap: (index){
LogUtil.log("点击了第:$index个");
},
),
);
}
}
网友评论