[譯]在底部導航欄裡使用 Provider

小德_REN發表於2019-07-05
IDE

[譯]在底部導航欄裡使用 Provider

在這篇文章裡，我將向你展示在 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 更新。

[譯]在底部導航欄裡使用 Provider

Github 程式碼

這裡是本篇文章涉及到的程式碼：github.com/flutter-dev…

持續化 BottomNavigationBar

Provide 不需要使用 setState 就可以變化顯示的 tabs，但是如果你想持久化當前頁面的狀態，例如，下次開啟 APP 時記住上次開啟的是哪個頁面，可以使用 PageStorageBucket，可以看我另外的一個例項，地址是： github.com/tensor-prog…

原文連結

medium.com/flutterdevs…

相關文章