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

问题描述

我们的应用程序构建在 Scaffold 之上，到目前为止，我们已经能够使用 NavigatorState 中提供的调用来满足大部分路由和导航要求(<代码>pushNamed()、pushReplacementNamed() 等).但是我们不想要的是当用户从我们的抽屉(导航)菜单中选择一个项目时有任何类型的推"动画.我们希望从导航菜单点击的目标屏幕有效地成为堆栈的新初始路线.目前我们使用 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 转移到仅使用单个 Scaffold 并在用户想要更改屏幕时直接更新主体"?

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，因此您可能需要考虑其中之一而不是 Drawer.

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

然而，拥有一个 Scaffold 并在用户点击抽屉项目时更新 body 是一种完全合理的方法.您可能会考虑使用 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 中的初始路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！