目录：
1.APP首页框架搭建
2.侧滑抽屉效果 drawer
3.轮播图Banner功能开发
4.自定义AppBar实现滚动渐变
使用到的框架：在pubspec.yaml进行配置
# Toast 打印
toast: ^0.1.5
# 网络请求组件
dio: ^3.0.10
# 轮播图组建
flutter_swiper: ^1.1.6
重点总结：
底部导航栏：BottomNavigationBar
侧滑动抽屉效果：drawer
轮播图：Swiper
ListView 滚动监听：NotificationListener
删除掉顶部导航栏：MediaQuery.removePadding
透明度：opacity
框架搭建：
图片
TabNavigator：框架页面
import 'package:flutter/material.dart';
import 'package:flutter_app1/module/mine/pages/MinePage.dart';
import 'package:flutter_app1/module/search/pages/SearchPage.dart';
import 'package:flutter_app1/module/travel/TravelPage.dart';
import 'package:flutter_app1/module/home/pages/HomePage.dart';
class TabNavigatorextends StatefulWidget {
@override
_NavigatorStatecreateState() =>_NavigatorState();
}
class _NavigatorStateextends State {
intcurrentIndex =0;
final _defultColor = Colors.black;
final _activeColor = Colors.blue;
Listlist = [
HomePage(),
SearchPage(),
TravelPage(),
MinePage(),
];
@override
Widgetbuild(BuildContext context) {
return Scaffold(
body:this.list[this.currentIndex],
bottomNavigationBar:BottomNavigationBar(
currentIndex:this.currentIndex,
iconSize:25,
type: BottomNavigationBarType.fixed,
onTap: (index){
setState(() {
this.currentIndex=index;
});
},
items: [
BottomNavigationBarItem(
icon:Icon(
Icons.home,
color:_defultColor,
),
activeIcon:Icon(
Icons.home,
color:_activeColor,
),
title:Text(
"首页",
style:TextStyle(
color:currentIndex!=0 ?_defultColor:_activeColor
),
)
),
BottomNavigationBarItem(
icon:Icon(
Icons.search,
color:_defultColor,
),
activeIcon:Icon(
Icons.search,
color:_activeColor,
),
title:Text(
"搜索",
style:TextStyle(
color:currentIndex!=1 ?_defultColor:_activeColor
),
)
),
BottomNavigationBarItem(
icon:Icon(
Icons.camera_alt,
color:_defultColor,
),
activeIcon:Icon(
Icons.camera_alt,
color:_activeColor,
),
title:Text(
"旅拍",
style:TextStyle(
color:currentIndex!=2 ?_defultColor:_activeColor
),
)
),
BottomNavigationBarItem(
icon:Icon(
Icons.account_circle,
color:_defultColor,
),
activeIcon:Icon(
Icons.account_circle,
color:_activeColor,
),
title:Text(
"我的",
style:TextStyle(
color:currentIndex!=3 ?_defultColor:_activeColor
),
)
),
],
),
drawer:Drawer(
child:ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child:Text("Drawer Header"),
decoration:BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title:Text("item 1"),
onTap: (){
Navigator.pop(context);
},
),
ListTile(
title:Text("item 2"),
onTap: (){
Navigator.pop(context);
},
)
],
),
),
);
}
}
HomePage：
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
const APPBAR_SCROLLOW_OFFSET =100;
class HomePageextends StatefulWidget {
@override
_HomePageStatecreateState() =>_HomePageState();
}
class _HomePageStateextends State {
final _imageUrl = [
"https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg",
"https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg",
"https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg",
];
doubleappBarAlpha =0;
_onScroll(offset){
double alpha = offset/APPBAR_SCROLLOW_OFFSET;
if(alpha<0){
alpha =0;
}else if(alpha>1){
alpha =1;
}
setState(() {
appBarAlpha = alpha;
});
print(appBarAlpha);
}
@override
Widgetbuild(BuildContext context) {
return Scaffold(
body:Stack(
children: [
MediaQuery.removePadding(//删除掉顶部导航栏
removeTop:true,
context: context,
child:NotificationListener(//滑动监听所有的类
// ignore: missing_return
onNotification:(scrollNotification){
if(scrollNotificationis ScrollUpdateNotification && scrollNotification.depth ==0){
_onScroll(scrollNotification.metrics.pixels);
}
},
child:ListView(
children: [
Container(
height:160,
child:Swiper(
itemCount:_imageUrl.length,
autoplay:true,
itemBuilder: (BuildContext context, int index) {
return Image.network(
_imageUrl[index],
fit: BoxFit.fill,
);
},
pagination:SwiperPagination(),//指示器
),
),
Container(
height:800,
child:ListTile(
title:Text("哈哈哈"),
),
)
],
),
),
),
Opacity(
opacity:appBarAlpha,//改变appBar的透明度
child:Container(
height:80,
decoration:BoxDecoration(color: Colors.white),
child:Center(
child:Padding(
padding:EdgeInsets.only(top:20),
child:Text("首页"),
),
),
),
)
],
),
);
}
}
网友评论