实际导航的Flutter导航抽屉

Question

我有一个简单Scaffold的抽屉和一个身体。我想在抽屉中选择一个项目，并使脚手架的主体导航到新视图。

我发现的大多数方法（像这样）仅使用有状态的小部件，并在轻按抽屉项时更改其状态。

但是，这完全忽略了该应用程序的导航堆栈，并且按返回并不会按预期返回上一个视图。

另一方面，Navigator.of(context).push...单击项目时使用会使用导航堆栈，但会更改整个屏幕，这也不是我想要的。

我试图为脚手架的主体创建一个新的自定义导航器，但是在NavigatorState从抽屉访问时遇到了问题。

对我来说，这似乎是一个常见的问题（例如，所有google应用都以这种方式工作），而我对如何正确实现这一点感到困惑。自定义导航器是正确的方法吗？有可用的例子吗？

Answer 1

我不知道这是否是正确的方法，但这是迄今为止对我来说最好的方法。试一试。

import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(debugShowCheckedModeBanner: false, home: new HomePage(),),);

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Widget currentPage;

  @override
  void initState() {
    super.initState();

    if(currentPage == null || _recentPages.length == 0)
      currentPage = new PageOne();
  }

  @override
  Widget build(BuildContext context) {
    return new WillPopScope( // To process back pressed event
      onWillPop: onWillPop,
      child: new Scaffold(
        appBar: new AppBar(title: new Text('Home'),),
        drawer: new Drawer(
          child: new ListView(
            children: <Widget>[
              new DrawerHeader(
                child: new UserAccountsDrawerHeader(
                  accountName: new Text('Vinoth Kumar'),
                  accountEmail: new Text('vinoth1094@gmail.com'),
                  currentAccountPicture: new CircleAvatar(
                      backgroundImage: new NetworkImage(
                          'https://scontent.fmaa1-1.fna.fbcdn.net/v/t1.0-9/16196015_10154888128487744_6901111466535510271_n.png?_nc_cat=0&oh=b987a0608ad9dad1beff57c489e53221&oe=5BB865E9')),
                ),
                padding: const EdgeInsets.all(0.0),
                margin: const EdgeInsets.all(0.0),
              ),
            ]..addAll(_buildNavigationItems()),
          ),
        ),
        body: currentPage,
      ),
    );
  }

  List<Widget> _buildNavigationItems() {
    List<Widget> navList = [];
    for (int i=0; i<_navigationItems.length; i++) {
      navList.add(new ListTile(
        title: new Text(_navigationItems[i].name),
        trailing: new Icon(_navigationItems[i].icon),
        onTap: () {
          onNavigationIconClicked(i);
        },
      ));
    }
    return navList;
  }

  onNavigationIconClicked(int i) {
    switch(_navigationItems[i].name) {
      case 'Page 1':
        if (!(currentPage is PageOne)) {
          Navigator.of(context).pop();
          setState(() {
            _recentPages.add(currentPage); // Add current page to _recentPages
            currentPage = new PageOne(); // Show new page
          });
        }
        break;
      case 'Page 2':
        if (!(currentPage is PageTwo)) {
          Navigator.of(context).pop();
          setState(() {
            _recentPages.add(currentPage); // Add current page to _recentPages
            currentPage = new PageTwo(); // Show new page
          });
        }
        break;
      case 'Page 3':
        if (!(currentPage is PageThree)) {
          Navigator.of(context).pop();
          setState(() {
            _recentPages.add(currentPage); // Add current page to _recentPages
            currentPage = new PageThree(); // Show new page
          });
        }
        break;
      case 'Page 4':
        if (!(currentPage is PageFour)) {
          Navigator.of(context).pop();
          setState(() {
            _recentPages.add(currentPage); // Add current page to _recentPages
            currentPage = new PageFour(); // Show new page
          });
        }
        break;
    }
  }

  Future<bool> onWillPop() async{
    if (_recentPages.length == 0) {
      return true;
    } else {
      setState(() {
        currentPage = _recentPages[_recentPages.length - 1];
        _recentPages.removeLast();
      });
      return false;
    }
  }
}

List<Widget> _recentPages = [];

List<NavigationItem> _navigationItems = [
  new NavigationItem('Page 1', Icons.keyboard_arrow_right),
  new NavigationItem('Page 2', Icons.keyboard_arrow_right),
  new NavigationItem('Page 3', Icons.keyboard_arrow_right),
  new NavigationItem('Page 4', Icons.keyboard_arrow_right),
];

class NavigationItem {
  final String name;
  final IconData icon;

  NavigationItem(this.name, this.icon);
}

示例页面：

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('Page One'),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('Page Two'),
    );
  }
}

class PageThree extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('Page Three'),
    );
  }
}

class PageFour extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text('Page Four'),
    );
  }
}