在這篇文章裡，我將向你展示在 BottomNavigationBar 裡如何使用 Flutter 的 Provider。
什麼是 Provider?
Provider 是 Flutter 團隊推薦的新的狀態管理方法。
雖然 setState 可以用於大多數場景，但是建議你不要用。尤其是你用了 FlutterBuilder，然後在用 setState，就會使你的程式碼很混亂，會造成很多問題。
接下來讓我們看如何在 BottomNavigationBar 裡使用 Provider。
Step 1: 在 pubspec.yaml 裡新增 Provider 的依賴
provider: ^3.0.0+1
複製程式碼Step2: 建立一個 Provider 的類
class BottomNavigationBarProvider with ChangeNotifier {
int _currentIndex = 0;
get currentIndex => _currentIndex;
set currentIndex(int index) {
_currentIndex = index;
notifyListeners();
}
}
複製程式碼在這個 Provider 裡，我儲存了 BottomNavigationBar 的當前表示展示第幾個頁面的索引的值，當設定新的索引的值之後，BottomNavigationBar 將會受到最新的值，並且重新整理 tab。
Step 3：使用 BottomNavigationBarProvider 來包 Widget
home: ChangeNotifierProvider<BottomNavigationBarProvider>(
child: BottomNavigationBarExample(),
builder: (BuildContext context) => BottomNavigationBarProvider(),
),
複製程式碼因為使用 ChangeNotifierProvider 包了 Widget，所以當 ChangeNotifierProvider 裡的 _currentIndex 值發生變化的時候，Widget 就會收到通知。
Step 4：實現 BottomNavigationBar 的 tabs
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
alignment: Alignment.center,
height: 300,
width: 300,
child: Text(
"Home",
style: TextStyle(color: Colors.white, fontSize: 30),
),
color: Colors.amber,
)),
);
}
}
複製程式碼class Profile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
alignment: Alignment.center,
height: 300,
width: 300,
child: Text(
"Profile",
style: TextStyle(color: Colors.white, fontSize: 30),
),
color: Colors.blue,
),
),
);
}
}
複製程式碼class Setting extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
alignment: Alignment.center,
height: 300,
width: 300,
child: Text(
"Settings",
style: TextStyle(color: Colors.white, fontSize: 30),
),
color: Colors.cyan,
)),
);
}
}
複製程式碼這裡建立裡 BottomNavigationBar 裡要使用的 3 個 tabs。
Step 5：使用 Provider 建立 BottomNavigationBarExample
class BottomNavigationBarExample extends StatefulWidget {
@override
_BottomNavigationBarExampleState createState() =>
_BottomNavigationBarExampleState();
}
class _BottomNavigationBarExampleState
extends State<BottomNavigationBarExample> {
var currentTab = [
Home(),
Profile(),
Setting(),
];
@override
Widget build(BuildContext context) {
var provider = Provider.of<BottomNavigationBarProvider>(context);
return Scaffold(
body: currentTab[provider.currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: provider.currentIndex,
onTap: (index) {
provider.currentIndex = index;
},
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.person),
title: new Text('Profile'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
)
],
),
);
}
}
複製程式碼這裡使用 Provider 的程式碼為：
@override
Widget build(BuildContext context) {
var provider = Provider.of<BottomNavigationBarProvider>(context);
return Scaffold(
...
bottomNavigationBar: BottomNavigationBar(
...
onTap: (index) {
provider.currentIndex = index;
},
...
)
)
}
複製程式碼至此，建立了一個使用底部導航欄切換頁面的應用，而且底部導航欄的切換使用到的當前頁面的索引的值由 Provider 更新。
Github 程式碼
這裡是本篇文章涉及到的程式碼：github.com/flutter-dev…
持續化 BottomNavigationBar
Provide 不需要使用 setState 就可以變化顯示的 tabs，但是如果你想持久化當前頁面的狀態，例如，下次開啟 APP 時記住上次開啟的是哪個頁面，可以使用 PageStorageBucket，可以看我另外的一個例項，地址是： github.com/tensor-prog…