带抽屉的颤振导航堆栈

Question

我正在使用 Flutter 构建一个多页面应用程序，但我似乎在错误地处理导航。我注意到，当我在屏幕之间导航时，它似乎只是不断地将页面推送到我的堆栈上，并且每次都“评估”整个堆栈。我有一个应用抽屉小部件，它包含在我的所有页面上，如下所示：

@override
  Widget build(BuildContext context) {
    AuthenticationContext authenticationContext =
      AuthenticationContext.of(context);
    auth = authenticationContext.auth;
    var drawerOptions = <Widget>[];
    for (var i = 0; i < drawerItems.length; i++) {
      var d = drawerItems[i];
      drawerOptions.add(new ListTile(
        leading: new Icon(d.icon),
        title: new Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    return new Drawer(
      child: new Column(
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text(widget.name != null ? widget.name : ""),
            accountEmail: Text(widget.email),
            currentAccountPicture: CircleAvatar(
              child: new Text(
                  widget.photoUrl == null ? widget.email[0].toUpperCase() : ""),
            ),
          ),
          new Column(children: drawerOptions)
        ],
      ),
    );
  }

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new HomePage();
      case 1:
        return new UserPantryPage();
      case 2:
        return new ShoppingListPage();
      case 3:
        return new FavoritesPage();
      case 4:
        auth.signOut();
        return new RootPage();
      default:
        return new Text("Error");
    }
  }

  _onSelectItem(int index) {
    Navigator.of(context).pop();
    Navigator.of(context)
        .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
      return _getDrawerItemWidget(index);
    }));
  }

我的每个页面小部件中都有调试打印语句，如果我开始在抽屉上单击以在页面之间导航，我注意到它将开始从主页打印调试语句，即使我'正在导航到一个完全独立的页面。我最初注意到它是因为我的一个页面调用了一些 API 来获取其构建方法中的数据，而且我使用该应用程序的次数越多，调用的 API 就越多。我将其追溯到这样一个事实，即所有页面小部件的构建方法似乎都被调用，即使当我要去另一个页面时，在多页面导航方面，我在这里做错了什么吗？页面应用？

Answer 1

当您四处导航时，Flutter 会播放屏幕转换的动画。因此，被动画化的小部件会不断重建，因为它们可能会在动画过程中发生视觉变化。使用默认的淡入淡出和滑动动画，您往往会同时构建 3 个屏幕 - 旧的屏幕逐渐消失，新的屏幕淡入，而旧屏幕下方的屏幕由于其他两个屏幕的一部分而略微可见褪色时透明。

您的问题的解决方案（以及一般使用 Flutter 的方法）是将与 UI 无关的所有内容移出 build 函数。如果您需要在初始化小部件时获取一些数据，请将该代码移至您的 StatefulWidget 的 initState 函数。

Answer 2

试试下面的伪代码。问题是 build 方法可以在应用程序生命周期中被多次调用，所以为了避免你的代码被多次执行，你将它移动到只调用一次的初始状态，要么使用覆盖方法，要么如下面的示例所示.更多信息在这里 - https://flutterbyexample.com/stateful-widget-lifecycle/

class NavigationDraw extends StatefulWidget {
  NavigationDraw({Key key, this.email, this.name}) : super(key:key);
  final String email;
  final String name;
  @override
  _NavigationDrawState createState() =>
      new _NavigationDrawState();
}

class _NavigationDrawState extends State<NavigationDraw> {
  BuildContext _ctx;
  var navi;

_NavigationDrawState () {
    navi = sideNavi();
  }


@override
  Widget build(BuildContext context) {

    return navi;

  }

sideNavi(){
     _getDrawerItemWidget(int pos) {
        switch (pos) {
          case 0:
            return new HomePage();
          case 1:
            return new UserPantryPage();
          case 2:
            return new ShoppingListPage();
          case 3:
            return new FavoritesPage();
          case 4:
            auth.signOut();
            return new RootPage();
          default:
            return new Text("Error");
        }
      }

      _onSelectItem(int index) {
        Navigator.of(context).pop();
        Navigator.of(context)
            .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
          return _getDrawerItemWidget(index);
        }));
      }
  AuthenticationContext authenticationContext = AuthenticationContext.of(context);
    auth = authenticationContext.auth;
    var drawerOptions = <Widget>[];

    for (var i = 0; i < drawerItems.length; i++) {
      var d = drawerItems[i];
      drawerOptions.add(
         new ListTile(
         leading: new Icon(d.icon),
         title: new Text(d.title),
         selected: i == _selectedDrawerIndex,
         onTap: () => _onSelectItem(i),
        ));
    }
   return new Drawer(
      child: new Column(
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text(widget.name != null ? widget.name : ""),
            accountEmail: Text(widget.email),
            currentAccountPicture: CircleAvatar(
              child: new Text(
                  widget.photoUrl == null ? widget.email[0].toUpperCase() : ""),
            ),
          ),
          new Column(children: drawerOptions)
        ],
      ),
    );
}