前言
Google推出flutter這樣一個新的高性能跨平臺（Android，ios）快速開發框架之後，被業界許多開發者所關注。我在接觸了flutter之後發現這個確實是一個好東西，好東西當然要和大家分享，對吧。
今天要跟大家分享的是底部導航功能的實現。我認爲flutter的就是在傳達一種最簡設計，一個部件只關注它本身，達到低耦合高內聚。所以本文講解底部導航將只關注該功能的實現，並對佈局思路進行介紹。
你將學到什麼
- 如何將部件拆分
- 如何構建flutter佈局
- 如何創建底部導航
首先讓大家看看效果。
建立佈局
第一步：繪製佈局視圖
將佈局分解爲基本元素：
- 頁面是由哪些元素構成的
- 哪些控件會因爲用戶的交互而發生變化，哪些不會
這裏我們需要思考一個問題，刷新的範圍在哪裏？
用過手機app的同學都知道，我們可以點擊底部導航欄，底部是不會刷新的，而刷新的只有上面部分。所以我們可以把整個頁面拆成兩部分。
第一個部分是橘色框裏的頁面部分，第二個部分是我們底部的導航器部分。而導航器是一直不變的，所以導航器應該是在它們之中處於父級widget層次。
第二步：開始構造底部導航
class BottomNavigationWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => BottomNavigationWidgetState();
}
class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _bottomNavigationColor = Colors.blue;
int _currentIndex = 0;
@override
Widget 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 {
@override
State<StatefulWidget> createState() => HomeScreenState();
}
class HomeScreenState extends State<HomeScreen> {
@override
Widget 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;
@override
void initState() {
pages
..add(HomeScreen())
..add(EmailScreen())
..add(AlarmsScreen())
..add(ProfileScreen());
}
然後讓我們的BottomNavigation的Scaffold佈局中body部分爲List中的頁面。
body: pages[_bottomNavigationIndex],
我們讓_currentIndex來控制我們到底再body這個位置上顯示哪個頁面。這樣就能夠通過Tap我們的bottomNavigationItem來達到控制頁面跳轉的作用啦。
相關鏈接：
Youtube教學視頻： https://www.youtube.com/watch?v=iYDaC2ESCkg&t=1221s
bilibili教學視頻： https://www.bilibili.com/video/av28014369
之後將持續分享一些flutter經驗，有任何問題的話歡迎回復，我會很快更新的！