Flutter Fluro路由库的页面切换动画效果

前端

2023-11-23 05:02:36

简介

Fluro是Flutter中一个流行的路由管理库，它提供了多种路由管理功能，包括页面切换动画效果。Fluro的页面切换函数Router.navigateTo支持11种不同效果的切换动画，支持延时设置和自定义切换效果。

动画效果

Fluro支持的11种页面切换动画效果如下：

none：没有动画效果
fadeIn：淡入
fadeOut：淡出
slideInFromLeft：从左滑入
slideInFromRight：从右滑入
slideInFromTop：从上滑入
slideInFromBottom：从下滑入
slideOutToLeft：向左滑出
slideOutToRight：向右滑出
slideOutToTop：向上滑出
slideOutToBottom：向下滑出

延时设置

Fluro支持为页面切换动画设置延时，可以通过transitionDuration参数来设置。transitionDuration参数的单位是毫秒，默认值为0，表示没有延时。

自定义切换效果

Fluro还支持自定义页面切换效果，可以通过transitionBuilder参数来实现。transitionBuilder参数是一个函数，它接受两个参数：BuildContext和Animation<double>，并返回一个Widget。这个Widget就是自定义的页面切换效果。

示例代码

下面是一个使用Fluro实现页面切换动画效果的示例代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建Fluro路由器
    final router = FluroRouter();

    // 定义路由处理函数
    router.define('/', handler: Handler(handlerFunc: (context, parameters) {
      return HomePage();
    }));

    // 定义路由处理函数，并设置页面切换动画效果
    router.define('/about', handler: Handler(
      handlerFunc: (context, parameters) {
        return AboutPage();
      },
      transitionType: TransitionType.fadeIn,
      transitionDuration: Duration(milliseconds: 500),
    ));

    // 运行应用
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      onGenerateRoute: router.generator,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // 使用Fluro跳转到AboutPage，并使用淡入的动画效果
            Navigator.pushNamed(context, '/about', transition: TransitionType.fadeIn);
          },
          child: Text('Go to About Page'),
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About Page'),
      ),
      body: Center(
        child: Text('This is the About Page'),
      ),
    );
  }
}