APP 导航框架与常用功能实现
APP 首页框架搭建
首先，先新建这些文件：
tab_navigator.dart 文件代码如下：
import 'package:flutter/material.dart';
import 'package:xiecheng/pages/home_page.dart';
import 'package:xiecheng/pages/my_page.dart';
import 'package:xiecheng/pages/search_page.dart';
import 'package:xiecheng/pages/travel_page.dart';
class TabNavigator extends StatefulWidget {
@override
_TabNavigatorState createState() => _TabNavigatorState();
}
class _TabNavigatorState extends State<TabNavigator> {
final _defaultColor = Colors.grey;
final _activeColor = Colors.blue;
int _currentIndex = 0;
final PageController _controller = PageController(
initialPage: 0,
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _controller,
children: [
HomePage(),
MyPage(),
SearchPage(),
TravelPage(),
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
_controller.jumpToPage(index);
setState(() {
_currentIndex = index;
});
},
type: BottomNavigationBarType.fixed, //把lable进行固定
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _defaultColor,
),
activeIcon: Icon(
Icons.home,
color: _activeColor,
),
title: Text(
'首页',
style: TextStyle(
color: _currentIndex != 0 ? _defaultColor : _activeColor,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.search,
color: _defaultColor,
),
activeIcon: Icon(
Icons.search,
color: _activeColor,
),
title: Text(
'搜索',
style: TextStyle(
color: _currentIndex != 1 ? _defaultColor : _activeColor,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.camera_alt,
color: _defaultColor,
),
activeIcon: Icon(
Icons.camera_alt,
color: _activeColor,
),
title: Text(
'旅拍',
style: TextStyle(
color: _currentIndex != 2 ? _defaultColor : _activeColor,
),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
color: _defaultColor,
),
activeIcon: Icon(
Icons.account_circle,
color: _activeColor,
),
title: Text(
'我的',
style: TextStyle(
color: _currentIndex != 3 ? _defaultColor : _activeColor,
),
),
),
],
),
);
}
}
home_page.dart 文件代码如下：
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('首页'),
),
);
}
}
my_page.dart 文件代码如下：
import 'package:flutter/material.dart';
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('我的'),
),
);
}
}
search_page.dart 文件代码如下：
import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
@override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('搜索'),
),
);
}
}
travel_page.dart 文件代码如下：
import 'package:flutter/material.dart';
class TravelPage extends StatefulWidget {
@override
TravelPageState createState() => TravelPageState();
}
class TravelPageState extends State<TravelPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('旅拍'),
),
);
}
}
最后将 main.dart 的代码进行微小的修改：
就可以运行啦：
轮播图 Banner 功能开发
轮播图需要用到的 swiper 插件，我们可以去 pub 网站上去找：
打开 pub 网站，搜索 swiper 即可：
这时候我们查看该插件的 Installing，里面会告诉你如何引入该插件：
这时候我们按照它说的步骤做就好啦：
引入后 VSCode 的右上角会出现一个下载的标志，点击下载即可；
然后编辑 home_page.dart 里的代码：
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _imageUrls = [
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1976529436,2778459069&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3597917999,2966077325&fm=26&gp=0.jpg',
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3352739916,685169444&fm=26&gp=0.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Container(
height: 160,
child: Swiper(
itemCount: _imageUrls.length,
autoplay: true,
itemBuilder: (BuildContext context, int index) {
return Image.network(
_imageUrls[index],
fit: BoxFit.fill,
);
},
pagination: SwiperPagination(),
),
),
],
),
),
);
}
}
运行界面如下：
自定义 AppBar 实现滚动渐变
修改 home_page.dart 的代码，如下：
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
const APPBAR_SCROLL_OFFSET = 100; //设置滚动最大距离
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _imageUrls = [
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1976529436,2778459069&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3597917999,2966077325&fm=26&gp=0.jpg',
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3352739916,685169444&fm=26&gp=0.jpg',
];
double appBarAlpha = 0.0;
_onScroll(offset) {
double alpha = offset / APPBAR_SCROLL_OFFSET;
if (alpha < 0.0) {
alpha = 0.0;
} else if (alpha > 1.0) {
alpha = 1.0;
}
setState(() {
appBarAlpha = alpha;
});
// print(appBarAlpha);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
MediaQuery.removePadding(
//把顶部预留的安全区域去掉
removeTop: true,
context: context,
child: NotificationListener(
//监听列表的滚动
onNotification: (scrollNotification) {
if (scrollNotification is ScrollUpdateNotification &&
scrollNotification.depth == 0) {
//滚动且是列表滚动的时候
_onScroll(scrollNotification.metrics.pixels);
}
},
child: ListView(
children: [
Container(
height: 160,
child: Swiper(
itemCount: _imageUrls.length,
autoplay: true,
itemBuilder: (BuildContext context, int index) {
return Image.network(
_imageUrls[index],
fit: BoxFit.fill,
);
},
pagination: SwiperPagination(),
),
),
Container(
height: 800,
child: ListTile(
title: Text('阿巴阿巴阿巴'),
),
),
],
),
),
),
Opacity(
//自定义AppBar
opacity: appBarAlpha,
child: Container(
height: 80,
decoration: BoxDecoration(color: Colors.white),
child: Center(
child: Padding(
padding: EdgeInsets.only(top: 20),
child: Text('首页'),
),
),
),
)
],
),
);
}
}
运行界面：
