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

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

特性

  • 可以使用PopScope小部件；
  • 支持多个平台；
  • 它与默认的滑动手势返回相同。仅在触发弹出操作时生效，否则被取消。

演示图

使用方法

要使用此包，在你的pubspec.yaml文件中添加pop_scope_page_transitions作为依赖项。

示例

导入库

import 'package:pop_scope_page_transitions/pop_scope_page_transitions.dart';

配置页面过渡

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: {
            // TargetPlatform.android: PopScopePageTransitionsBuilder(),  // 如果需要在Android上使用，可以取消注释
            TargetPlatform.iOS: PopScopePageTransitionsBuilder(),     // 在iOS上使用
          },
        ),
      ),
      routes: {
        '/': (context) => const HomePage(),
        '/second': (context) => const SecondPage(),
      },
    );
  }
}

然后，你可以在视图中添加PopScope小部件。

添加PopScope小部件

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pushNamed('/second');
          },
          child: const Text('前往第二页'),
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            PopupMenuButton<String>(
              onSelected: (String result) {
                // 处理菜单选择
              },
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                const PopupMenuItem<String>(
                  value: 'option1',
                  child: Text('选项1'),
                ),
                const PopupMenuItem<String>(
                  value: 'option2',
                  child: Text('选项2'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('第二页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('返回首页'),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用pop_scope_page_transitions插件来实现页面过渡动画的示例代码。pop_scope_page_transitions是一个允许你在Flutter应用中自定义页面返回动画的插件。

首先，确保你已经在pubspec.yaml文件中添加了pop_scope_page_transitions依赖：

dependencies:
  flutter:
    sdk: flutter
  pop_scope_page_transitions: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤来使用这个插件：

  1. 导入包

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

import 'package:pop_scope_page_transitions/pop_scope_page_transitions.dart';
  1. 创建自定义的过渡动画

你可以使用PopScopePageTransitionsBuilder来构建自定义的过渡动画。以下是一个简单的示例，演示了如何使用默认的过渡动画和自定义的过渡动画。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
      navigatorObservers: [PopScopeObserver()], // 添加PopScopeObserver来监听返回事件
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.push(
            context,
            PopScopePageTransitionsBuilder(
              transitionsBuilder: (
                context,
                animation,
                secondaryAnimation,
                child,
              ) {
                // 自定义过渡动画，这里使用ScaleTransition作为示例
                return ScaleTransition(
                  scale: animation,
                  child: child,
                );
              },
              child: MaterialPageRoute(
                builder: (_) => SecondScreen(),
                settings: RouteSettings(),
              ),
            ).build(context),
          ),
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context), // 使用默认的返回动画
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

在上面的代码中，我们做了以下几件事：

  • 我们在MaterialApp的navigatorObservers中添加了PopScopeObserver，这是pop_scope_page_transitions插件提供的一个观察者，用于监听返回事件。
  • 在HomeScreen中，我们使用PopScopePageTransitionsBuilder来构建自定义的过渡动画。在transitionsBuilder回调中，我们定义了一个ScaleTransition作为示例。
  • 在SecondScreen中，我们简单地使用Navigator.pop(context)来返回上一页，此时将使用默认的返回动画（如果你没有为返回动作指定自定义动画）。

你可以根据需求在transitionsBuilder中定义更加复杂的过渡动画。pop_scope_page_transitions插件允许你完全控制页面之间的过渡效果。

回到顶部