从抽屉导航部分屏幕

时间：2021-03-18 11:23:31

标签： flutter navigator

假设我有一个具有以下设置的应用：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          color: Colors.grey[200],
          child: Row(
            children: [
              MainMenu(),
              Expanded(child: MainLoginScreen()),
            ],
          ),
        ));
  }
}

我想知道如何使用任何 .push() 方法从 MainMenu 仅导航 MainLoginScreen 小部件。

（我找到了一种从 mainloginscreen 内的上下文导航的方法，方法是用 MaterialApp 小部件包装它，但是如果我想改用 MainMenu 小部件，它有另一个上下文，该怎么办）

1 个答案:

答案 0 :(得分：2)

普遍认为“屏幕”是路线中最顶层的小部件。 'screen' 的实例是您传递给 Navigator.of(context).push(MaterialPageRoute(builder: (context) => HereGoesTheScreen()) 的内容。所以如果它在 Scaffold 下，它就不是一个屏幕。也就是说，以下是选项：

1.如果您想使用带有“后退”按钮的导航

使用不同的屏幕。为避免代码重复，创建 MenuAndContentScreen 类：

class MenuAndContentScreen extends StatelessWidget {
  final Widget child;

  MenuAndContentScreen({
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey[200],
        child: Row(
          children: [
            MainMenu(),
            Expanded(child: child),
          ],
        ),
      ),
    );
  }
}

然后为每个屏幕创建一对屏幕和嵌套小部件：

class MainLoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MenuAndContentScreen(
      child: MainLoginWidget(),
    );
  }
}

class MainLoginWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Here goes the screen content.
  }
}

2.如果您不需要使用“后退”按钮导航

您可以使用 IndexedStack 小部件。它可以包含多个小部件，一次只能看到一个。

class MenuAndContentScreen extends StatefulWidget {
  @override
  _MenuAndContentScreenState createState() => _MenuAndContentScreenState(
    initialContentIndex: 0,
  );
}

class _MenuAndContentScreenState extends State<MenuAndContentScreen> {
  int _index;

  _MainMenuAndContentScreenState({
    required int initialContentIndex,
  }) : _contentIndex = initialContentIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey[200],
        child: Row(
          children: [
            MainMenu(
              // A callback that will be triggered somewhere down the menu
              // when an item is tapped.
              setContentIndex: _setContentIndex,
            ),
            Expanded(
              child: IndexedStack(
                index: _contentIndex,
                children: [
                  MainLoginWidget(),
                  SomeOtherContentWidget(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _setContentIndex(int index) {
    setState(() {
      _contentIndex = index;
    });
  }
}

通常首选第一种方式，因为它是声明式的，这是 Flutter 的一个主要思想。当您静态声明整个小部件树时，出错和需要跟踪的事情就会减少。一旦你感受到它，那真的是一种享受。如果您想避免返回导航，请使用 ahmetakil 在评论中建议的替换：Navigator.of(context).pushReplacement(...)

第二种方式主要用于 MainMenu 需要保存一些需要在视图之间保留的状态，因此我们选择具有可互换内容的一个屏幕。

3.使用嵌套的 Navigator 小部件

当您特别询问嵌套的 Navigator 小部件时，您可以使用它代替 IndexedStack：

class MenuAndContentScreen extends StatefulWidget {
  @override
  _MenuAndContentScreenState createState() => _MenuAndContentScreenState();
}

class _MenuAndContentScreenState extends State<MenuAndContentScreen> {
  final _navigatorKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey[200],
        child: Row(
          children: [
            MainMenu(
              navigatorKey: _navigatorKey,
            ),
            Expanded(
              child: Navigator(
                key: _navigatorKey,
                onGenerateRoute: ...
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// Then somewhere in MainMenu:
  final anotherContext = navigatorKey.currentContext;
  Navigator.of(anotherContext).push(...);

这应该可以解决问题，但这是一个不好的做法，因为：

  1. MainMenu 知道某个特定的 Navigator 存在并且应该与之交互。最好像 (2) 中那样使用回调来抽象这些知识，或者不要像 (1) 那样使用特定的导航器。 Flutter 实际上是将信息向下传递而不是向上传递。
  2. 有时您想突出显示 MainMenu 中的活动项，但 MainMenu 很难知道导航器中当前是哪个小部件。这将添加另一个非向下的交互。

对于这种交互存在 BLoC 模式

在 Flutter 中，BLoC 代表业务逻辑组件。在最简单的形式中，它是一个在父小部件中创建的普通对象，然后传递给 MainMenu 和 Navigator，然后这些小部件可以通过它发送事件并侦听它。

class CurrentPageBloc {
  // int is an example. You may use String, enum or whatever
  // to identify pages.
  final _outCurrentPageController = BehaviorSubject<int>();
  Stream<int> _outCurrentPage => _outCurrentPageController.stream;

  void setCurrentPage(int page) {
    _outCurrentPageController.sink.add(page);
  }

  void dispose() {
    _outCurrentPageController.close();
  }
}

class MenuAndContentScreen extends StatefulWidget {
  @override
  _MenuAndContentScreenState createState() => _MenuAndContentScreenState();
}

class _MenuAndContentScreenState extends State<MenuAndContentScreen> {
  final _currentPageBloc = CurrentPageBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey[200],
        child: Row(
          children: [
            MainMenu(
              currentPageBloc: _currentPageBloc,
            ),
            Expanded(
              child: ContentWidget(
                currentPageBloc: _currentPageBloc,
                onGenerateRoute: ...
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _currentPageBloc.dispose();
  }
}

// Then in MainMenu:
  currentPageBloc.setCurrentPage(1);

// Then in ContentWidget's state:
  final _navigatorKey = GlobalKey();
  late final StreamSubscription _subscription;

  @override
  void initState() {
    super.initState();
    _subscription = widget.currentPageBloc.outCurrentPage.listen(_setCurrentPage);
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _navigatorKey,
      // Everything else.
    );
  }

  void _setCurrentPage(int currentPage) {
    // Can't use this.context, because the Navigator's context is down the tree.
    final anotherContext = navigatorKey?.currentContext;
    if (anotherContext != null) { // null if the event is emitted before the first build.
      Navigator.of(anotherContext).push(...); // Use currentPage
    }
  }

  @override
  void dispose() {
    _subscription.cancel();
  }

这样做有好处：

  • MainMenu 不知道谁会收到事件，如果有人的话。
  • 任意数量的侦听器都可以侦听此类事件。

但是，Navigator 仍然存在根本性缺陷。它可以在没有 MainMenu 知识的情况下使用“后退”按钮或其内部小部件进行导航。所以没有一个变量知道现在显示哪个页面。要突出显示活动菜单项，您需要查询导航器的堆栈，这消除了 BLoC 的好处。

出于所有这些原因，我仍然建议前两种解决方案之一。

相关问题
最新问题