Flutter原生页面路由插件native_page_route的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter原生页面路由插件native_page_route的使用

本README描述了该插件。如果你将此插件发布到pub.dev，此README的内容将出现在你的插件首页。

Native Page Route

native_page_route 包封装了创建原生页面路由的简单函数，并提供了防止重复创建相同路由的功能。已在移动平台（Android/iOS）上完全测试过。

使用方法

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

dependencies:
  native_page_route: ^x.x.x

示例

以下是一些示例，展示了如何使用此库。

创建原生页面路由
import 'package:native_page_route/native_page_route.dart';

// 创建一个平台页面路由。
nativePageRoute(
    builder: (context) => const YourAwesomeScreen(), // 指定要导航到的目标屏幕
    settings: RouteSettings(name: 'YourAwesomeScreenConstantName', arguments: SomeArguments()), // 设置路由设置
    maintainState: true, // 是否保持状态
    fullscreenDialog: true, // 是否为全屏对话框
    iosTitle: 'Awesome', // iOS标题
);

// 创建一个平台页面路由，如果此屏幕已呈现，则返回null。
notRepeatableNativePageRoute(
    builder: (context) => const YourAwesomeScreen(),
    context: context, // 上下文
    settings: RouteSettings(name: 'YourAwesomeScreenConstantName', arguments: SomeArguments()),
    maintainState: true,
    fullscreenDialog: true,
    iosTitle: 'Awesome',
);
示例代码

以下是完整的示例代码，展示如何在应用中使用 native_page_route。

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

// 定义全局的NavigatorKey
class NavigationService {
  static GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
}

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

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

  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Native route example', // 应用名称
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调
      ),
      navigatorKey: NavigationService.navigatorKey, // 设置全局的NavigatorKey
      initialRoute: RouteKeys.firstScreen, // 初始路由
      onGenerateRoute: AppRouter, // 路由生成器
    );
  }
}

更多关于Flutter原生页面路由插件native_page_route的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter原生页面路由插件native_page_route的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 native_page_route 插件在 Flutter 中实现原生页面路由的示例代码。native_page_route 插件允许你创建具有原生过渡效果的页面路由，这在某些情况下可以提供比 Flutter 默认路由更好的性能和更流畅的用户体验。

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

dependencies:
  flutter:
    sdk: flutter
  native_page_route: ^0.4.0  # 请检查最新版本号

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

接下来，让我们看一个完整的示例，展示如何使用 native_page_route 进行页面跳转：

主页面 (main.dart)

import 'package:flutter/material.dart';
import 'package:native_page_route/native_page_route.dart';
import 'second_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Native Page Route Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Native Page Route Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              NativePageRoute<void>(
                builder: (context) => SecondPage(),
                settings: RouteSettings(name: 'SecondPage'),
                transition: NativePageRouteTransitionType.cupertino, // 或者使用 NativePageRouteTransitionType.material
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

第二页面 (second_page.dart)

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('Welcome to the Second Page!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        tooltip: 'Back',
        child: Icon(Icons.arrow_back),
      ),
    );
  }
}

解释

  1. 依赖添加：首先在 pubspec.yaml 中添加 native_page_route 依赖。
  2. 主页面：在 MyHomePage 中，我们创建了一个按钮，当用户点击按钮时，使用 NativePageRoute 跳转到 SecondPage。
  3. 路由设置：在 Navigator.of(context).push 方法中，我们创建了一个 NativePageRoute 实例，并指定了页面构建器 (builder)、路由设置 (settings) 和过渡类型 (transition)。这里我们使用了 NativePageRouteTransitionType.cupertino，你也可以选择 NativePageRouteTransitionType.material 来获得 Material Design 风格的过渡效果。
  4. 第二页面：SecondPage 是一个简单的页面，包含一个返回按钮，当用户点击按钮时，使用 Navigator.of(context).pop() 返回上一页面。

这个示例展示了如何使用 native_page_route 插件在 Flutter 应用中实现原生页面路由。根据你的需求，你可以进一步自定义过渡效果和页面布局。

回到顶部