flutter, PageRouteBuilder, 添加水平过渡

Question

iOS 的原生导航转换是 RightToLeft。 ANDROID 的本机导航转换是从下到上。我想覆盖 Flutter 中的本机导航转换，以便在 iOS 和 ANDROID 中具有相同的从右到左转换。为此，我正在尝试使用 PageRouteBuilder 但没有运气让它工作。第一个代码块，我有一个非常基本的屏幕，它可以工作......但本机。第二个 sn-p 包含我正在尝试集成的导航转换代码。

我正在尝试修复的代码。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(

        title: new Text(widget.title),
      ),
      body: new Center(

        child: new Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            //==============================================
            //  How would I force a horizontal transition?

            mbNav001(context),

            new Text(
              'Screen 1',
            ),
          ],
        ),
      ),

    );
  }
}


//===================================================
Padding mbNav001(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(28.0),
    child: new MaterialButton(
        height: 80.0,
        padding: EdgeInsets.all(50.0),
        minWidth: double.infinity,
        color: Theme.of(context).primaryColor,
        textColor: Colors.white,
        child: new Text(
          "material button a",
          style: new TextStyle(
            fontSize: 20.0,
            color: Colors.yellow,
          ),
        ),

        splashColor: Colors.redAccent,
        // -----    This line is giving me error...
        onPressed: () {
          print('click mb');

//===========================================================
//  How to force a horizontal trans in Navigation?
//===========================================================
          Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
          );
        }

      //  expecting to find...  :

    ),
  );
}
//===================================================




class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to first screen when tapped!
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

---

这是我要添加的转换代码。

  transitionsBuilder: (
      BuildContext context, 
      Animation<double> animation,
      Animation<double> secondaryAnimation, 
      Widget child) {
        return SlideTransition(
          position: new Tween<Offset>(
          begin: const Offset(1.0, 0.0),
          end: Offset.zero,
         ).animate(animation),
        child: new SlideTransition(
        position: new Tween<Offset>(
          begin: Offset.zero,
          end: const Offset(1.0, 0.0),
        ).animate(secondaryAnimation),
        child: child,
      ),
    );
  },
);
Navigator.of(context).push(pageRoute);

Answer 1

在我的案例中，使用 CupertinoPageRoute 而不是 MaterialPageRoute 解决了同样的问题，而无需尝试应用任何自定义动画。

Navigator.of(context).push(CupertinoPageRoute(builder: (context) => MyPanel()));

Answer 2

这是我用来在 iOS 上实现从底部动画向上滑动的代码。您只需要编辑补间值即可实现从左到右的动画。

  var builder = PageRouteBuilder(
  pageBuilder: (BuildContext context,
      Animation animation,
      Animation secondaryAnimation) {
    return YourChildWidgetHere();
  },
  transitionsBuilder: (
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return new SlideTransition(
      position: new Tween<Offset>(
        begin: const Offset(0.0, 1.0),
        end: Offset.zero,
      ).animate(animation),
      child: child, 
    );

  });
Navigator.of(context).push(builder);