阅读 738

[译]在底部导航栏里使用 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 更新。

Github 代码

这里是本篇文章涉及到的代码:github.com/flutter-dev…

持续化 BottomNavigationBar

Provide 不需要使用 setState 就可以变化显示的 tabs,但是如果你想持久化当前页面的状态,例如,下次打开 APP 时记住上次打开的是哪个页面,可以使用 PageStorageBucket,可以看我另外的一个实例,地址是: github.com/tensor-prog…

原文链接

medium.com/flutterdevs…

关注下面的标签,发现更多相似文章
评论