颤动的持久底部导航栏和页面视图替换方法

时间:2019-10-29 10:55:58

标签: flutter dart

我有一个Navbar状态完整窗口小部件,该窗口小部件可跟踪当前页面,并返回一个具有底部导航栏和基于当前页面的动态主体的窗口小部件,并存储为状态

class _PullingoNavbarState extends State<PullingoNavbar> {
      static int _page = 1;
      final _screens = {0: PullingoMap(), 1: Dashboard(), 2: Dashboard()};
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: _screens[_page],
          bottomNavigationBar: CurvedNavigationBar(
            animationDuration: Duration(milliseconds: 200),
            backgroundColor: Colors.blueAccent,
            index: _page,
            items: <Widget>[
              PullingoIcon(icon: Icons.favorite),
              PullingoIcon(icon: Icons.chrome_reader_mode),
              PullingoIcon(icon: Icons.person),
            ],
            onTap: (index) {
              setState(() {
                _page = index;
              });
            },
          ),
        );
      }
    }

和根窗口小部件如下:

class RoutesWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
      title: 'PULLINGO',
      theme: pullingoTheme,
      routes: {
        "/": (_) => PullingoNavbar(),
      },
    );
}

在地图中预先创建_screens实例对我来说并不好。这可能会创建这些屏幕的状态,而不管用户是否访问它们。 There are few suggestions given here。上面的方法看起来还可以,还是我应该完全避免这种方法?

1 个答案:

答案 0 :(得分:0)

您可以在导航时使用PageView和AutomaticKeepAliveClientMixin来保留您的窗口小部件。使用这种方法,仅当用户通过底部导航栏导航到窗口小部件时,才创建窗口小部件。我最近写了一篇有关如何使用它的文章,可能会有用。

https://cantaspinar.com/persistent-bottom-navigation-bar-in-flutter/