flutter - Navigator 或 SlideTransition 用于从下到上显示屏幕

Question

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

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

标签： flutterflutter-layoutflutter-animation

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