7、Flutter - 项目实战 - 仿微信（一）BottomNavigationBar 4个主页面显示

本文主要是介绍7、Flutter - 项目实战 - 仿微信（一）BottomNavigationBar 4个主页面显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目实战 - 仿微信（一）BottomNavigationBar 4个主页面显示

代码详细代码参见Demo

Demo地址 -> wechat_demo

其他相关联文章

7、Flutter - 项目实战 - 仿微信（一）BottomNavigationBar 4个主页面显示

8、Flutter - 项目实战 - 仿微信（二）发现页面

9、Flutter - 项目实战 - 仿微信（三）我的页面

10、Flutter - 项目实战 - 仿微信（四）数据准备

11、Flutter - 项目实战 - 仿微信（五）通讯录

12、Flutter - 项目实战 - 仿微信（六）聊天页面

要实现的效果就是如下图的 BottomNavigationBar 能点击并切换页面

代码详细代码参见Demo（目前还有点小问题，不影响本片文章所诉内容的功能。后面写文章的时候会处理掉）

Demo地址 -> wachat_demo

创建工程和创建文件就不在说明，同时为了后面优化和修改将 BottomNavigationBar 功能抽取到一个类中实现，其他实现方式不再讲解

1、main

import 'package:flutter/material.dart';
import 'package:wechat/root_page.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(//1, 0, 0, 0.0 设置为透明 0.0透明度 item长按highlightColor: Color.fromRGBO(1, 0, 0, 0.0),//tabbar item点击splashColor: Color.fromRGBO(1, 0, 0, 0.0),cardColor: Color.fromRGBO(1, 1, 1, 0.5),primarySwatch: Colors.blue,//点击的水波纹去掉。tabbar//visualDensity: VisualDensity.adaptivePlatformDensity,),home: RootPage(),);}
}

1.1、ThemeData

在Flutter中使用ThemeData来在应用中共享颜色和字体样式，Theme有两种：全局Theme和局部Theme。全局Theme是由应用程序根MaterialApp创建的Theme 。

参考：https://www.jianshu.com/p/8d8ded72e673

highlightColor: Color.fromRGBO(1, 0, 0, 0.0),   //bar 的长按背景颜色设置为透明
splashColor: Color.fromRGBO(1, 0, 0, 0.0),    //bar的点击背景颜色设置为透明
cardColor: Color.fromRGBO(1, 1, 1, 0.5),       // 用在卡片(Card)上的Material的颜色。
primarySwatch: Colors.blue,                          //主题颜色，除了tabbar、navigationBar之外，还有其他地方的主题颜色

1.2、MaterialApp

MaterialApp 是符合MaterialApp Design设计理念的入口Widget，从源码可以看出该widget的构造方法中有多个参数，但是基本上大多数参数是可以省略的。

MaterialApp({Key key,this.title = '', // 设备用于为用户识别应用程序的单行描述this.home, // 应用程序默认路由的小部件,用来定义当前应用打开的时候，所显示的界面this.color, // 在操作系统界面中应用程序使用的主色。this.theme, // 应用程序小部件使用的颜色。this.routes = const <String, WidgetBuilder>{}, // 应用程序的顶级路由表this.navigatorKey, // 在构建导航器时使用的键。this.initialRoute, // 如果构建了导航器，则显示的第一个路由的名称this.onGenerateRoute, // 应用程序导航到指定路由时使用的路由生成器回调this.onUnknownRoute, // 当 onGenerateRoute 无法生成路由(initialRoute除外)时调用this.navigatorObservers = const <NavigatorObserver>[], // 为该应用程序创建的导航器的观察者列表this.builder, // 用于在导航器上面插入小部件，但在由WidgetsApp小部件创建的其他小部件下面插入小部件，或用于完全替换导航器this.onGenerateTitle, // 如果非空，则调用此回调函数来生成应用程序的标题字符串，否则使用标题。this.locale, // 此应用程序本地化小部件的初始区域设置基于此值。this.localizationsDelegates, // 这个应用程序本地化小部件的委托。this.localeListResolutionCallback, // 这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。this.localeResolutionCallback, // this.supportedLocales = const <Locale>[Locale('en', 'US')], // 此应用程序已本地化的地区列表 this.debugShowMaterialGrid = false, // 打开绘制基线网格材质应用程序的网格纸覆盖this.showPerformanceOverlay = false, // 打开性能叠加this.checkerboardRasterCacheImages = false, // 打开栅格缓存图像的棋盘格this.checkerboardOffscreenLayers = false, // 打开渲染到屏幕外位图的图层的棋盘格this.showSemanticsDebugger = false, // 打开显示框架报告的可访问性信息的覆盖this.debugShowCheckedModeBanner = true, // 在选中模式下打开一个小的“DEBUG”横幅，表示应用程序处于选中模式
})

参考：https://www.jianshu.com/p/20ce0fe051a1

2、root_page

这里用到的几个主页面引用，这几个页面后面再做介绍。这里不做详细说明，只要先创建这几个页面能显示出来即可

import 'package:flutter/material.dart';
import 'package:wechat/pages/chat/chat_page.dart';
import 'package:wechat/pages/discover/discover_page.dart';
import 'package:wechat/pages/friends.dart';
import 'package:wechat/pages/mine.dart';class RootPage extends StatefulWidget {@override_RootPageState createState() => _RootPageState();
}List<Widget> _pages = [ChatPage(),FriendsPage(),DiscoverPage(),MinePage(),
];class _RootPageState extends State<RootPage> {int _currentIndex = 0;final PageController _controller = PageController(initialPage: 0);@overrideWidget build(BuildContext context) {return Scaffold(body: PageView(//页面滚动变化时调用
//        onPageChanged: (int index){
//          _currentIndex = index;
//          setState(() {});
//        },physics: NeverScrollableScrollPhysics(), //禁止页面滚动，tabbar页面controller: _controller,children: _pages,),bottomNavigationBar: BottomNavigationBar(onTap: (index) {setState(() {_currentIndex = index;});_controller.jumpToPage(index);},//tabbar item字体大小selectedFontSize: 12.0,currentIndex: _currentIndex, //默认启动显示的item 从0开始fixedColor: Colors.green, //选中的颜色type: BottomNavigationBarType.fixed, //固定items: [BottomNavigationBarItem(icon: Image.asset('images/tabbar_chat.png',width: 20,height: 20,),activeIcon: Image.asset('images/tabbar_chat_hl.png',width: 20,height: 20,),title: Text('微信')),BottomNavigationBarItem(icon: Image.asset('images/tabbar_friends.png',width: 20,height: 20,),activeIcon: Image.asset('images/tabbar_friends_hl.png',width: 20,height: 20,),title: Text('通讯录')),BottomNavigationBarItem(icon: Image.asset('images/tabbar_discover.png',width: 20,height: 20,),activeIcon: Image.asset('images/tabbar_discover_hl.png',width: 20,height: 20,),title: Text('发现')),BottomNavigationBarItem(icon: Image.asset('images/tabbar_mine.png',width: 20,height: 20,),activeIcon: Image.asset('images/tabbar_mine_hl.png',width: 20,height: 20,),title: Text('我')),],),);}
}