0

iOS のネイティブ ナビゲーション トランジションは RightToLeft です。ANDROID のネイティブ ナビゲーション トランジションは、下から上です。Flutter のネイティブ ナビゲーション トランジションをオーバーライドして、iOS と ANDROID で同じ右から左へのトランジションを実現したいと考えています。これを行うために、私は PageRouteBuilder を使用しようとしていますが、うまく動作しません。最初のコード ブロックです。動作する非常に基本的な画面がありますが、ネイティブに動作します。2 番目のスニペットには、統合しようとしているナビゲーション遷移コードが含まれています。

私が修正しようとしているコード。

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);
4

2 に答える 2

1

これは、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);
于 2018-08-30T09:35:18.287 に答える