Flutter29，【一步教学，一步到位】

title: ‘OpenSource China’,

theme: ThemeData(

primaryColor: Color(AppColors.APP_THEME), //主题色

),

home: HomePage(),

);

}

}

HomePage.dart主界面内容的布局分为titleBar， body和底部的NavagationBar

import ‘package:flutter/material.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,),

];

_pageController = PageController(initialPage: _currentIndex);

}

@override

Widget build(BuildContext context) {

//SafeArea 适配刘海屏等

return Scaffold(

/**

• appBar

*/

appBar: AppBar(

title: Text('OpenSour

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

ce China’),

),

/**

*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);

},

),

);

}

}

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)

);

}

Constants.dart常量统一处理