dart – 在没有动画的情况下替换MaterialApp中的初始路线?

前端之家收集整理的这篇文章主要介绍了dart – 在没有动画的情况下替换MaterialApp中的初始路线?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们的应用程序建立在Scaffold之上,到目前为止,我们已经能够使用NavigatorState中提供的调用(pushNamed(),pushReplacementNamed()等)来满足我们的大部分路由和导航要求.我们不想要的是,当用户从我们的抽屉(导航)菜单中选择一个项目时,可以使用任何类型的“推送”动画.我们希望从导航菜单中单击目标屏幕,以有效地成为堆栈的新初始路径.目前我们正在使用pushReplacementNamed()来确保应用栏中没有后退箭头.但是,右下方的幻灯片意味着正在构建堆栈.

在没有动画的情况下更改初始路线的最佳选择是什么?我们可以这样做同时同时关闭抽屉的动画吗?或者我们是否正在考虑这样的情况:我们需要从导航器转移到仅使用单个脚手架并在用户想要更换屏幕时直接更新“正文”?

我们注意到在NavigatorState上有一个replace()调用,我们认为它可能是开始查找的正确位置,但是不清楚如何访问最初在新MaterialApp()中设置的各种路由.像replaceNamed()这样的东西可能是有序的;-)

解决方法

你在做什么听起来有点像 BottomNavigationBar,所以你可能想要考虑其中一个而不是抽屉.

但是,当用户点击抽屉物品时,拥有一个脚手架并更新身体是一种非常合理的方法.您可以考虑将FadeTransition从一个主体更改为另一个主体.

或者,如果您喜欢使用Navigator但不想使用默认的幻灯片动画,则可以通过扩展MaterialPageRoute来自定义(或禁用)动画.这是一个例子:

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(),);
        }
        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'),);
  }
}

猜你在找的Flutter相关文章