【自学Flutter】30 路由动画的使用

最新推荐文章于 2024-04-19 13:04:44 发布

技术宅-Nopi

最新推荐文章于 2024-04-19 13:04:44 发布

阅读量165

点赞数

分类专栏：自学Flutter 文章标签： Flutter Android

本文链接：https://blog.csdn.net/weixin_43266090/article/details/94395756

版权

自学Flutter 专栏收录该内容

64 篇文章 9 订阅

订阅专栏

30 路由动画的使用

1.源代码

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("路由的跳转"),),
        body: Center(
            child: Builder(builder: (context){
              return RaisedButton(
                child: Text('打开第二个页面'),
                onPressed: (){
                  Navigator.push(context, PageRouteBuilder(
                      transitionDuration: Duration(milliseconds: 500),
                      pageBuilder: (BuildContext context, Animation animation,
                          Animation secondaryAnimation) {
                        return RotationTransition(
                            turns: animation,
                            child: Second()
                        );
                      })
                  );
                },
              );
            })
        ),
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('返回上个页面'),
            onPressed: () {
              Navigator.pop(context);
            }
        ),
      ),
    );
  }
}

2.解释源代码

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("路由的跳转"),),
        body: Center(
            child: Builder(builder: (context){
              return RaisedButton(
                child: Text('打开第二个页面'),
                onPressed: (){
                  Navigator.push(context, PageRouteBuilder(
                      //动画时间为500毫秒
                      transitionDuration: Duration(milliseconds: 500),
                      pageBuilder: (BuildContext context, Animation animation,
                          Animation secondaryAnimation) {
                        //使用旋转过渡,
                        return RotationTransition(
                            turns: animation,
                            child: Second() //路由Second
                        );
                      })
                  );
                },
              );
            })
        ),
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('返回上个页面'),
            onPressed: () {
              Navigator.pop(context);
            }
        ),
      ),
    );
  }
}