Flutter30.Opensource China左侧抽屉内容搭建和主界面pager搭建(02)

main.dart主界面设置主题色，填充内容是HomePage

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<HomePage> { //底部导航栏的四个title final _appBarTitle = ['News', 'Updates', 'Find', 'My']; //底部四个导航栏的view List<NavigationIconView> _navigationIconView; //当前条目 var _currentIndex = 0; //底部导航栏对应的四个page List<Widget> _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: Image.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<AboutPage> { @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<PublishTweetPage> { @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<SettingsPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('settings'), ), ); } }

tweet_black_house.dart

import 'package:flutter/material.dart'; /** * 左侧抽屉 motivation */ class TweetBlackHousePage extends StatefulWidget { @override _TweetBlackHousePageState createState() => _TweetBlackHousePageState(); } class _TweetBlackHousePageState extends State<TweetBlackHousePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('motivation'), ), ); } }

news_list_page.dart主界面的News

import 'package:flutter/material.dart'; /** * 主界面News */ class NewsListPage extends StatefulWidget { @override _NewsListPageState createState() => _NewsListPageState(); } class _NewsListPageState extends State<NewsListPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('News'), ), ); } }

profile_page.dart主界面的My

import 'package:flutter/material.dart'; /** * 主界面My */ class ProfilePage extends StatefulWidget { @override _ProfilePageState createState() => _ProfilePageState(); } class _ProfilePageState extends State<ProfilePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My'), ), ); } }

tweet_page.dart主界面的Updates

import 'package:flutter/material.dart'; /** * 主界面Updates */ class TweetPage extends StatefulWidget { @override _TweetPageState createState() => _TweetPageState(); } class _TweetPageState extends State<TweetPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Updates'), ), ); } }

discovery_page.dart主界面的Find

import 'package:flutter/material.dart'; /** * 主界面find */ class DiscoveryPage extends StatefulWidget { @override _DiscoveryPageState createState() => _DiscoveryPageState(); } class _DiscoveryPageState extends State<DiscoveryPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Find'), ), ); } }

Constants.dart

abstract class AppColors{ //应用主题色 static const APP_THEME = 0xff63ca6c; static const APPBAR = 0xffffffff; }

效果图如下：