前言

Google推出flutter這樣一個新的高性能跨平臺（Android，ios）快速開發框架之后，被業界許多開發者所關注。我在接觸了flutter之后發現這個確實是一個好東西，好東西當然要和大家分享，對吧。

今天要跟大家分享的是底部導航功能的實現。我認為flutter的就是在傳達一種最簡設計，一個部件只關注它本身，達到低耦合高內聚。所以本文講解底部導航將只關注該功能的實現，并對布局思路進行介紹。

你將學到什么

• 如何將部件拆分
• 如何構建flutter布局
• 如何創建底部導航

首先讓大家看看效果。

這是一個最簡單的底部導航案例，我不希望引入過多其他東西，把初學者的腦子搞得很亂（這也是我在學習中所遇到的）。

建立布局

第一步：繪制布局視圖

將布局分解為基本元素：

• 頁面是由哪些元素構成的
• 哪些控件會因為用戶的交互而發生變化，哪些不會

在這個應用中我們期望能夠通過點擊底部導航欄就能切換上面的整個頁面。這個行為觸發了頁面的刷新。

這里我們需要思考一個問題，刷新的范圍在哪里？

用過手機app的同學都知道，我們可以點擊底部導航欄，底部是不會刷新的，而刷新的只有上面部分。所以我們可以把整個頁面拆成兩部分。

第一個部分是橘色框里的頁面部分，第二個部分是我們底部的導航器部分。而導航器是一直不變的，所以導航器應該是在它們之中處于父級widget層次。

第二步：開始構造底部導航

class BottomNavigationWidget extends StatefulWidget {@overrideState<StatefulWidget> createState() => BottomNavigationWidgetState(); }class BottomNavigationWidgetState extends State<BottomNavigationWidget> {final _bottomNavigationColor = Colors.blue;int _currentIndex = 0;@overrideWidget build(BuildContext context) {return Scaffold(bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home,color: _bottomNavigationColor,),title: Text('HOME',style: TextStyle(color: _bottomNavigationColor),)),BottomNavigationBarItem(icon: Icon(Icons.email,color: _bottomNavigationColor,),title: Text('Email',style: TextStyle(color: _bottomNavigationColor),)),BottomNavigationBarItem(icon: Icon(Icons.pages,color: _bottomNavigationColor,),title: Text('PAGES',style: TextStyle(color: _bottomNavigationColor),)),BottomNavigationBarItem(icon: Icon(Icons.airplay,color: _bottomNavigationColor,),title: Text('AIRPLAY',style: TextStyle(color: _bottomNavigationColor),)),],currentIndex: _currentIndex,onTap: (int index) {setState(() {_currentIndex = index;});},),);} } 復制代碼

我們這里使用了Scaffold布局，它默認提供了一個bottomNavigationBar的屬性，我們在這里給它一個BottomNavigationBar,并在這個BottomNavigationBar中放了四個BottomNavigationBarItem（一下簡稱item）。每個item就是底部的一個導航按鈕。

BottomNavigationBar的items是一個數組，那么就會存在下標。BottomNavigationBar為我們提供了一個currentIndex屬性，默認是0,我們進去看看這個方法。

/// The index into [items] of the current active item.final int currentIndex; 復制代碼

currentIndex代表了當前再items中被選中的index。

BottomNavigationBar還提供了一個onTap方法。我們再看看這個方法。

/// The callback that is called when a item is tapped./// The widget creating the bottom navigation bar needs to keep track of the/// current index and call `setState` to rebuild it with the newly provided/// index.final ValueChanged<int> onTap; 復制代碼

當底部導航的一個item被點擊時，它會調用此方法，并傳入當前item的index值，這樣就能改變焦點到當前的index上的item了。

我們來看看效果：

創建切換頁面

然后我們需要分別創建四個頁面，對映四個item，由于四個頁面極為相似這里只放一個。建議大家對這四個頁面分別創建一個dart文件。

import 'package:flutter/material.dart';class HomeScreen extends StatefulWidget {@overrideState<StatefulWidget> createState() => HomeScreenState(); }class HomeScreenState extends State<HomeScreen> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('HOME'),),);} } 復制代碼

每個頁面都是一個Scaffold布局，有一個appBar。

將頁面顯示在界面上

我們再回到底部導航這個控件中。 由于我們是通過currentIndex這個變量來控制跳轉的，頁面要想同步也必須依賴于這個變量。這里我們使用一個List來與items對應。

List<Widget> pages = List<Widget>();final _bottomNavigationBarItemColor = Colors.teal;int _currentIndex = 0;@overridevoid initState() {pages..add(HomeScreen())..add(EmailScreen())..add(AlarmsScreen())..add(ProfileScreen());} 復制代碼

然后讓我們的BottomNavigation的Scaffold布局中body部分為List中的頁面。

body: pages[_bottomNavigationIndex], 復制代碼

我們讓_currentIndex來控制我們到底再body這個位置上顯示哪個頁面。這樣就能夠通過Tap我們的bottomNavigationItem來達到控制頁面跳轉的作用啦。

相關鏈接：

完整代碼： github.com/Vadaski/Vad…

Youtube教學視頻： www.youtube.com/watch?v=iYD…

bilibili教學視頻： www.bilibili.com/video/av280…

之后將持續分享一些flutter經驗，有任何問題的話歡迎回復，我會很快更新的！

從 0 到 1：我的 Flutter 技術實踐 | 掘金技術征文，征文活動正在進行中

總結

以上是生活随笔為你收集整理的Flutter 底部导航——BottomNavigationBar | 掘金技术征文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。