导航器或SlideTransition用于从下往上显示屏幕。

Question

我想做一个问答界面，效果是在选择一个答案选项后，从下往上出现下一题的选项。这些变化只适用于正文，appbar不会改变。

要进入测验主界面，我使用导航仪。对于导航上的问题，也是先想用已经嵌套好的Navigator，但经过研究，我认为通过动画来进行改变会更好，即使用SlideTransition。我大致了解了如何使用SlideTransition使第一个屏幕选择答案后出现第二个屏幕的问题，但后续的问题如何做我完全不清楚。请给我建议，我应该用Navigator还是SlideTransition，如果用SlideTransition，如何让连续的屏幕出现问题？

Answer 1

你可以用自定义转场建立自己的Route.请查看示例。

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