import ‘package:flutter/material.dart’;
import ‘package:flutterapp2/constants/Constants.dart’;
import ‘HomePage.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//关闭右上角的debug符号
debugShowCheckedModeBanner: false,
title: ‘OpenSource China’,
theme: ThemeData(
primaryColor: Color(AppColors.APP_THEME), //主题色
),
home: HomePage(),
);
}
}
HomePage.dart主界面内容的布局分为titleBar, body和底部的NavagationBar,body部分使用pager填充,增加了MyDrawer自定义Drawer的交互
import ‘package:flutter/material.dart’;
import ‘package:flutterapp2/constants/Constants.dart’;
import ‘package:flutterapp2/pages/discovery_page.dart’;
import ‘package:flutterapp2/pages/news_list_page.dart’;
import ‘package:flutterapp2/pages/profile_page.dart’;
import ‘package:flutterapp2/pages/tweet_page.dart’;
import ‘package:flutterapp2/widgets/my_drawer.dart’;
import ‘package:flutterapp2/widgets/navigation_icon_view.dart’;
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State {
//底部导航栏的四个title
final _appBarTitle = [‘News’, ‘Updates’, ‘Find’, ‘My’];
//底部四个导航栏的view
List _navigationIconView;
//当前条目
var _currentIndex = 0;
//底部导航栏对应的四个page
List _pages;
PageController _pageController;
@override
void initState() {
// TODO: implement initState
super.initState();
//初始化底部导航栏
_navigationIconView = [
NavigationIconView(
title: ‘News’,
iconPath: ‘assets/images/ic_nav_news_normal.png’,
activeIconPath: ‘assets/images/ic_nav_news_actived.png’),
NavigationIconView(
title: ‘Updates’,
iconPath: ‘assets/images/ic_nav_tweet_normal.png’,
activeIconPath: ‘assets/images/ic_nav_tweet_actived.png’),
NavigationIconView(
title: ‘Find’,
iconPath: ‘assets/images/ic_nav_discover_normal.png’,
activeIconPath: ‘assets/images/ic_nav_discover_actived.png’),
NavigationIconView(
title: ‘My’,
iconPath: ‘assets/images/ic_nav_my_normal.png’,
activeIconPath: ‘assets/images/ic_nav_my_pressed.png’),
];
_pages = [
// Container(color: Colors.red,),
// Container(color: Colors.blue,),
// Container(color: Colors.yellow,),
// Container(color: Colors.green,),
NewsListPage(),
TweetPage(),
DiscoveryPage(),
ProfilePage(),
];
_pageController = PageController(initialPage: _currentIndex);
}
@override
Widget build(BuildContext context) {
//SafeArea 适配刘海屏等
return Scaffold(
/**
- appBar
*/
appBar: AppBar(
title: Text(
_appBarTitle[_currentIndex],
style: TextStyle(color: Color(AppColors.APPBAR)),),
),
/**
*body
*/
//body的pager的滑动PageView来协助实现
body: PageView.builder(
itemBuilder: (BuildContext context, int index){
return _pages[index];
},
controller: _pageController,
//控制可以滑动的数目
itemCount: _pages.length,
//与底部导航栏交互
onPageChanged: (index) {
setState(() {
_currentIndex = index;
});
},
),
/**
- 底部导航栏
*/
bottomNavigationBar: BottomNavigationBar(
//更新当前的条目
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
items: _navigationIconView.map((e) => e.item).toList(),
onTap: (index) {
setState(() {
_currentIndex = index;
});
//底部导航栏的滑动
_pageController.animateToPage(
index, duration: Duration(microseconds: 10), curve: Curves.ease);
},
),
drawer: MyDrawer(
headImgPath: ‘assets/images/cover_img.jpg’,
menuIcons: [Icons.send, Icons.home, Icons.error, Icons.settings],
menuTitles: [‘send’, ‘motivation’, ‘about’, ‘settings’],
),
);
}
}
my_drawer.dart自定义的Drawer,有构造函数和初始化的赋值
import ‘package:flutter/material.dart’;
import ‘file:///D:/Code/Flutter/FlutterHello/flutter_app2/flutter_app2/lib/pages/drawer/about_page.dart’;
import ‘file:///D:/Code/Flutter/FlutterHello/flutter_app2/flutter_app2/lib/pages/drawer/publish_tweet_page.dart’;
import ‘file:///D:/Code/Flutter/FlutterHello/flutter_app2/flutter_app2/lib/pages/drawer/tweet_black_house.dart’;
import ‘package:flutterapp2/pages/drawer/settings_page.dart’;
/**
- 自定义drawer
*/
class MyDrawer extends StatelessWidget {
final String headImgPath;
final List menuTitles;
final List menuIcons;
MyDrawer({Key key,
@required this.headImgPath,
@required this.menuTitles,
-
@required this.menuIcons})
- assert(headImgPath != null),
assert(menuTitles != null),
assert(menuIcons != null),
super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
elevation: 0.0,//去掉Drawer旁边的阴影
child: ListView.separated(
padding: const EdgeInsets.all(0.0),//去掉上面的状态栏
itemCount: menuTitles.length + 1,
itemBuilder: (context, index) {
if(index == 0) {
return Image.asset(headImgPath, fit: BoxFit.cover, );
}
index -= 1;//去掉最上面的背景条目
return ListTile(
leading: Icon(menuIcons[index]),
title: Text(menuTitles[index]),
trailing: Icon(Icons.arrow_forward_ios),//尾巴
//点击事件
onTap: () {
switch (index) {
case 0:
//PublishTweetPage
_navPush(context, PublishTweetPage());
break;
case 1:
//TweetBlackHousePage
_navPush(context, TweetBlackHousePage());
break;
//AboutPage
case 2:
_navPush(context, AboutPage());
break;
//SettingsPage
case 3:
_navPush(context, SettingsPage());
break;
}
},
);
},
separatorBuilder: (context, index) {
//后面的条目才会有分割线
if(index == 0){
return Divider(
height: 0.0,
);
}else{
return Divider(
height: 1.0,
);
}
},
),
);
}
//条目跳转
_navPush(BuildContext context, Widget page) {
//路由跳转
Navigator.push(context, MaterialPageRoute(builder: (context) => page));
}
}
navigation_icon_view.dart底部导航栏的对象,包含title以及icon的路径,使用构造函数来实现
import ‘package:flutter/material.dart’;
/// 自定义底部导航栏的四个View
class NavigationIconView{
//条目
final BottomNavigationBarItem item;
//title
final String title;
//icon path
final String iconPath;
//actived icon path
final String activeIconPath;
//构造函数,使用命名构造函数的形式进行赋值
NavigationIconView({
@required this.title, @required this.iconPath, @required this.activeIconPath})
:item = BottomNavigationBarItem(
icon: Ima
【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】
浏览器打开:qq.cn.hn/FTf 免费领取
ge.asset(iconPath,
width: 20.0,
height: 20.0,),
activeIcon: Image.asset(activeIconPath,
width: 20.0,
height: 20.0,),
title: Text(title)
);
}
about_page.dart左侧滑栏的about条目
import ‘package:flutter/material.dart’;
/**
- 左侧抽屉 about
*/
class AboutPage extends StatefulWidget {
@override
_AboutPageState createState() => _AboutPageState();
}
class _AboutPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘about’),
),
);
}
}
publish_tweet_page.dart
import ‘package:flutter/material.dart’;
/**
- 左侧抽屉 send
*/
class PublishTweetPage extends StatefulWidget {
@override
_PublishTweetPageState createState() => _PublishTweetPageState();
}
class _PublishTweetPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘send’),
),
);
}
}
settings_page.dart
import ‘package:flutter/material.dart’;
/**
- 左侧抽屉 settings
*/
class SettingsPage extends StatefulWidget {
@override
_SettingsPageState createState() => _SettingsPageState();
}
class _SettingsPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘settings’),