Navigator 或 SlideTransition 用于从下到上显示屏幕答案

【问题标题】：Navigator or SlideTransition for appear screen from bottom to topNavigator 或 SlideTransition 用于从下到上显示屏幕
【发布时间】：2020-08-26 03:54:09
【问题描述】：

我想制作一个测验屏幕，其效果是在选择答案选项后，下一个带有选项的问题会从下向上出现。更改只会应用于正文，而应用栏不会更改。

要转到测验主屏幕，我使用导航器。对于issues的导航也是一样，一开始想用已经嵌套的Navigator，但是研究了题目之后，觉得还是通过动画来改变比较好，即使用SlideTransition。我大致了解如何在使用 SlideTransition 选择第一个答案后显示第二个屏幕，但如何处理后续的问题对我来说完全不清楚。请给我建议我应该使用 Navigator 或 SlideTransition，如果是 SlideTransition，我如何让连续的屏幕出现问题？

【问题讨论】：

您是否需要自定义导航动画？

标签： flutter flutter-layout flutter-animation

【解决方案1】：

您可以使用自定义转换构建自己的路线。请检查样品。

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Goto Second Page'),
          onPressed: () {
            Navigator.of(context).push(SecondPageRoute());
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

class SecondPageRoute extends PageRouteBuilder {
  SecondPageRoute() : super(pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) => SecondPage());

  // OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return SlideTransition(
      position: Tween<Offset>(begin: Offset(0, 1), end: Offset(.0, .0))
          .animate(controller),
      child: SecondPage(),
    );
  }
}

【讨论】：

谢谢。但是，如何使 AppBar 保持静态，而只有 Body 会随着新的自下而上而变化？
您需要使用 Navigator 小部件，因此您有 RootScreen 和 App bar 和 Navigator 小部件作为主体，并且对于导航，您应该使用该 Navigator 小部件的 NavigatorKey。然后你将有一个静态的应用栏。也就是说，你需要使用内部导航
谢谢！我找到了一种更简单的方法，我使用 PageView 和 PageController 做到了这一点