在没有动画的情况下替换MaterialApp中的初始Route？ [英] Replace initial Route in MaterialApp without animation?

问题描述

我们的应用程序建立在 Scaffold 的基础上，到目前为止，我们已经能够使用<$ c $内提供的调用来满足我们大多数的路由和导航要求c> NavigatorState （ pushNamed（）， pushReplacementNamed（）等）。但是，我们不希望当用户从我们的抽屉（nav）菜单中选择一项时出现任何类型的推送动画。我们希望通过导航菜单单击目标屏幕来有效地成为堆栈的新初始路径。目前，我们正在为此使用pushReplacementNamed（），以确保应用程序栏中没有后退箭头。但是，从右边滑动的动画意味着正在建立堆栈。

Our app is built on top of Scaffold and to this point we have been able to accommodate most of our routing and navigation requirements using the provided calls within NavigatorState (pushNamed(), pushReplacementNamed(), etc.). What we don't want though, is to have any kind of 'push' animation when a user selects an item from our drawer (nav) menu. We want the destination screen from a nav menu click to effectively become the new initial route of the stack. For the moment we are using pushReplacementNamed() for this to ensure no back arrow in the app bar. But, the slide-in-from-the-right animation implies a stack is building.

在不使用动画的情况下更改初始路线的最佳选择是什么，并且我们在同时关闭抽屉动画的同时这样做吗？还是在这种情况下，我们需要从Navigator转移到仅使用一个脚手架并在用户想要更改屏幕时直接更新身体？

What is our best option for changing that initial route without animation, and, can we do that while also concurrently animating the drawer closed? Or are we looking at a situation here where we need to move away from Navigator over to just using a single Scaffold and updating the 'body' directly when the user wants to change screens?

我们注意到在 NavigatorState 上有一个 replace（）调用，我们认为这可能是开始的正确位置外观，但目前尚不清楚如何访问最初在 new MaterialApp（）中设置的各种路线。类似于 replaceNamed（）之类的东西;-)

We note there is a replace() call on NavigatorState which we assume might be the right place to start looking, but it's unclear how to access our various routes originally set up in new MaterialApp(). Something like replaceNamed() might be in order ;-)

推荐答案

您在做什么听起来像 BottomNavigationBar ，因此您可能要考虑使用其中一个而不是抽屉。

What you're doing sounds somewhat like a BottomNavigationBar, so you might want to consider one of those instead of a Drawer.

但是，只有一个脚手架并在用户点击抽屉项时更新主体是完全合理的方法。您可能会考虑将 FadeTransition 从一个主体更改为另一个主体。

However, having a single Scaffold and updating the body when the user taps a drawer item is a totally reasonable approach. You might consider a FadeTransition to change from one body to another.

或者，如果您喜欢使用 Navigator ，但不希望使用默认的幻灯片动画，您可以通过扩展 MaterialPageRoute 来自定义（或禁用）动画。例如：

Or, if you like using Navigator but don't want the default slide animation, you can customize (or disable) the animation by extending MaterialPageRoute. Here's an example of that:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    // Fades between routes. (If you don't want any animation, 
    // just return child.)
    return new FadeTransition(opacity: animation, child: child);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Navigation example',
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/': return new MyCustomRoute(
            builder: (_) => new MyHomePage(),
            settings: settings,
          );
          case '/somewhere': return new MyCustomRoute(
            builder: (_) => new Somewhere(),
            settings: settings,
          );
        }
        assert(false);
      }
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Navigation example'),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget> [
            new DrawerHeader(
              child: new Container(
                  child: const Text('This is a header'),
              ),
            ),
            new ListTile(
              leading: const Icon(Icons.navigate_next),
              title: const Text('Navigate somewhere'),
              onTap: () {
                Navigator.pushNamed(context, '/somewhere');
              },
            ),
          ],
        ),
      ),
      body: new Center(
        child: new Text(
          'This is a home page.',
        ),
      ),
    );
  }
}

class Somewhere extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Text(
          'Congrats, you did it.',
        ),
      ),
      appBar: new AppBar(
        title: new Text('Somewhere'),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new DrawerHeader(
              child: new Container(
                child: const Text('This is a header'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这篇关于在没有动画的情况下替换MaterialApp中的初始Route？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！