Flutter页面过渡动画插件jhs_transitions的使用

Flutter页面过渡动画插件jhs_transitions的使用

本插件帮助你在页面之间进行导航时添加一些动画效果和配置参数。

安装插件

在你的pubspec.yaml文件中添加以下依赖：

flutter pub add jhs_transitions

基本用法

基本的页面导航示例如下：

HsTransitions(
  context: context,
  child: const SecondPage(), // 最终页面
);

使用动画

使用特定的动画进行页面导航：

HsTransitions(
  context: context,
  child: const SecondPage(), // 最终页面
  animation: AnimationType.fadeIn,
);

设置动画持续时间

你可以设置动画的持续时间来控制过渡的时间：

HsTransitions(
  context: context,
  child: const SecondPage(), // 最终页面
  animation: AnimationType.fadeIn,
  duration: const Duration(milliseconds: 300)
);

替换当前页面

使用替换功能可以导航到新页面并删除前一个页面：

HsTransitions(
  context: context,
  child: const SecondPage(), // 最终页面
  animation: AnimationType.fadeIn,
  duration: const Duration(milliseconds: 300),
  replacement: true
);

示例代码

下面是完整的示例代码，展示了如何使用该插件实现页面之间的过渡动画。

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

// 枚举用于定义应用程序中的不同路由名称。
enum Routes {
  firstPage,
  secondPage,
}

// 定义路由映射，将枚举名称与对应的页面关联起来。
Map<String, Widget Function(BuildContext)> routes = {
  Routes.firstPage.name: (context) => const FirstPage(),
  Routes.secondPage.name: (context) => const SecondPage(),
};

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

// 主应用小部件。
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '动画包',
      debugShowCheckedModeBanner: false,
      initialRoute: Routes.firstPage.name,
      routes: routes,
    );
  }
}

// 应用程序的初始页面。
class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("第一页"),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          color: Colors.white,
          onPressed: () {
            HsTransitions(
              context: context,
              child: const SecondPage(),
              animation: AnimationType.fadeIn,
              duration: const Duration(milliseconds: 300),
            );
          },
          child: const Text("跳转到第2页"),
        ),
      ),
    );
  }
}

// 第二页，在第一页之后显示。
class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("第二页"),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blueGrey,
      body: const Center(
        child: Text('你好，第二页'),
      ),
    );
  }
}

更多关于Flutter页面过渡动画插件jhs_transitions的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter页面过渡动画插件jhs_transitions的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


jhs_transitions 是一个用于 Flutter 的页面过渡动画插件，它提供了多种内置的过渡动画效果，可以帮助你轻松地为页面切换添加动画效果。以下是如何使用 jhs_transitions 插件的详细步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 jhs_transitions 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  jhs_transitions: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 jhs_transitions 包：

import 'package:jhs_transitions/jhs_transitions.dart';

3. 使用 JhsTransitions 进行页面导航

jhs_transitions 提供了多种内置的过渡动画效果，你可以通过 JhsTransitions 类来使用这些动画。

示例 1: 使用内置的过渡动画

JhsTransitions.push(
  context,
  const SecondPage(),
  transitionType: JhsTransitionType.slideLeft, // 使用从左滑入的动画
);

示例 2: 使用自定义的过渡动画

JhsTransitions.push(
  context,
  const SecondPage(),
  transitionType: JhsTransitionType.custom,
  customTransition: (context, animation, secondaryAnimation, child) {
    return ScaleTransition(
      scale: animation,
      child: child,
    );
  },
);

示例 3: 使用 JhsTransitions 进行页面替换

JhsTransitions.replace(
  context,
  const SecondPage(),
  transitionType: JhsTransitionType.fade, // 使用淡入淡出的动画
);

示例 4: 使用 JhsTransitions 进行页面返回

JhsTransitions.pop(
  context,
  transitionType: JhsTransitionType.slideRight, // 使用从右滑出的动画
);

4. 内置的过渡动画类型

jhs_transitions 提供了多种内置的过渡动画类型，你可以通过 JhsTransitionType 来选择：

  • slideLeft: 从左滑入
  • slideRight: 从右滑入
  • slideTop: 从上滑入
  • slideBottom: 从下滑入
  • fade: 淡入淡出
  • scale: 缩放
  • rotation: 旋转
  • custom: 自定义过渡动画

5. 完整示例

以下是一个完整的示例，展示了如何使用 jhs_transitions 进行页面导航：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const FirstPage(),
      routes: {
        '/second': (context) => const SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            JhsTransitions.push(
              context,
              const SecondPage(),
              transitionType: JhsTransitionType.slideLeft, // 使用从左滑入的动画
            );
          },
          child: const Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            JhsTransitions.pop(
              context,
              transitionType: JhsTransitionType.slideRight, // 使用从右滑出的动画
            );
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}
回到顶部