flutter:添加页面切换动画后的route

一,代码:

1,main.dart

import 'package:flutter/material.dart';
import 'package:tangpoem/common/SlideRoute.dart';
import 'pages/CopyPage.dart';
import 'pages/SystemPage.dart';
import 'pages/MyHomePage.dart';

import 'dart:io' show Platform;
import 'package:tangpoem/conf/Config.dart';
import 'common/ScaleRoute.dart';

void main() {
  String myVar = const String.fromEnvironment('MYENV');
  print("myVar:"+myVar);
  if (myVar == 'devel') {
    Config.env = "devel";
  } else {
    Config.env = "prod";
  }
  print("Config.env:"+Config.env);
  runApp(MyApp());
}

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

      initialRoute: '/', // 首页面

      // 当页面跳转时进行参数处理
      onGenerateRoute: (RouteSettings settings) {

        Map data={};
        if (settings.arguments!=null) {
          data = settings.arguments as Map<dynamic, dynamic>;
        }


        switch (settings.name) {
          case '/':
            return MaterialPageRoute(builder: (_) => MyHomePage());;
            break;
          case '/system':
            return ScaleRoute(SystemPage(arguments: data));
            break;
          case '/copy':
            return SlideRoute(CopyPage(arguments: data));
            break;
          default:
            return null;
        }
      },


    );
  }
}

2,SlideRoute.dart

import 'package:flutter/material.dart';

class SlideRoute extends PageRouteBuilder {
  final Widget page;

  SlideRoute(this.page) : super(
    pageBuilder: (
        context,
        animation,
        secondaryAnimation,
        ) {
      return page;
    },
    transitionsBuilder: (
        context,
        animation,
        secondaryAnimation,
        child,
        ) {

      //左侧滑动进入退出
      return SlideTransition(
        position: Tween<Offset>(
            begin: Offset(0.0, 0.5),
            end: Offset(0.0, 0.0)
        ).animate(CurvedAnimation(
            parent: animation,
            //curve:Curves.fastOutSlowIn
            curve:Curves.easeOut
        )),
        child: child,
      );
    },
    transitionDuration: Duration(milliseconds: 400),
  );
}

3,实际调用:

  MyHomePage.dart

import 'package:flutter/material.dart';
import 'package:tangpoem/pages/CopyPage.dart';
import 'package:tangpoem/pages/SystemPage.dart';
import 'package:tangpoem/pages/SaveGalleryPage.dart';
import 'package:tangpoem/common/ScaleRoute.dart';
import 'package:tangpoem/common/SlideRoute.dart';
import 'package:tangpoem/common/FadeRoute.dart';

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("首页"),
      ),

      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: <Widget>[
              SizedBox(height: 85),
              ElevatedButton(
                child: Text("点击进入播放音频"),
                onPressed: () {
                  Navigator.of(context).pushNamed('/audio',arguments:{'title': "音频播放",'id': 7});
                },
              ),
              SizedBox(height: 5),
              ElevatedButton(
                child: Text("系统信息"),
                onPressed: () {
                  Navigator.of(context).pushNamed('/system',arguments:{'title': "系统信息",'id': 7});
                },
              ),
              SizedBox(height: 5),
              ElevatedButton(
                child: Text("复制粘贴"),
                onPressed: () {
                  Navigator.of(context).pushNamed('/copy',arguments:{'title': "复制粘贴",'id': 7});
                },
              ),

            ],
          ),
        ),
      ),
// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

posted @ 2025-04-12 08:42  刘宏缔的架构森林  阅读(33)  评论(0)    收藏  举报