Flutter导航管理插件easy

Flutter导航管理插件easy_nav的使用

easy_nav 是一个简单的封装，用于在 Flutter 应用中处理导航、对话框、底部菜单和 SnackBar，而无需传递 BuildContext。

安装

首先，在您的 pubspec.yaml 文件中添加 easy_nav 包：

dependencies:
  easy_nav: ^最新版本号

然后运行 flutter pub get 来安装包。

初始化

在 MaterialApp 中添加 navigatorKey：

@override
Widget build(BuildContext context, WidgetRef ref) {
  return MaterialApp(
    ...
    navigatorKey: EasyNav.navigatorKey,
    ...
  );
}

// 导航到新页面
navManager.goTo(HomePage());

// 替换当前页面
navManager.replace(HomePage());

// 导航到页面并移除所有页面直到满足条件
navManager.goToAndRemoveUntil(HomePage(), (route) => false);

// 使用命名路由导航
navManager.goToNamed("/homepage");

// 使用命名路由替换当前页面
navManager.replaceNamed("/homepage");

// 使用命名路由导航并移除所有页面直到满足条件
navManager.goToNamedAndRemoveUntil("/homepage", (route) => false);

// 显示全屏对话框
navManager.goTo(AddContactPage(), fullScreenDialog: true);

对话框

初始化 `DialogManager`

在您的 ViewModel 中初始化 DialogManager：

class HomeViewModel extends ChangeNotifier {
  final dialogManager = DialogManager();
  
  // 其他业务逻辑...
}

显示对话框

使用 DialogManager 显示对话框：

// 显示自定义对话框
dialogManager.showEasyDialog(builder: (context) {
  return YourWidget();
});

// 显示日期选择器
dialogManager.showEasyDatePicker(
  initialDate: DateTime.now(),
  firstDate: DateTime.now().subtract(const Duration(hours: 24 * 365)),
  lastDate: DateTime.now().subtract(const Duration(hours: 24 * 365)),
);

// 显示通用对话框
dialogManager.showEasyGeneralDialog(
  pageBuilder: (context, animation, secondaryAnimation) {
    return YourWidget();
  },
);

底部菜单

初始化 `BottomSheetManager`

在您的 ViewModel 中初始化 BottomSheetManager：

class HomeViewModel extends ChangeNotifier {
  final bottomSheetManager = BottomSheetManager();
  
  // 其他业务逻辑...
}

显示底部菜单

使用 BottomSheetManager 显示底部菜单：

// 显示自定义底部菜单
bottomSheetManager.showEasyBottomSheet(builder: (context) {
  return YourWidget();
});

// 显示模态底部菜单
bottomSheetManager.showEasyModalBottomSheet(builder: (context) {
  return YourWidget();
});

SnackBar

初始化 `SnackBarManager`

在您的 ViewModel 中初始化 SnackBarManager：

class HomeViewModel extends ChangeNotifier {
  final snackBarManager = SnackBarManager();
  
  // 其他业务逻辑...
}

显示 SnackBar

使用 SnackBarManager 显示 SnackBar：

// 显示自定义 SnackBar
snackBarManager.showEasySnackbar(const SnackBar(content: Text("Item Deleted")));

// 清除所有 SnackBar
snackBarManager.clearAllSnacks();

// 隐藏当前 SnackBar
snackBarManager.hideCurrentSnackBar();

// 移除当前 SnackBar
snackBarManager.removeCurrentSnackBar();

更多关于Flutter导航管理插件easy_nav的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼

更多关于Flutter导航管理插件easy_nav的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

easy_nav 是 Flutter 中一个简化导航管理的插件，它提供了一种更简洁和直观的方式来处理页面之间的导航。相比于 Flutter 原生的 Navigator，easy_nav 提供了更多的功能和更简单的 API，使得开发者可以更轻松地管理页面栈和导航逻辑。

安装

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

dependencies:
  flutter:
    sdk: flutter
  easy_nav: ^1.0.0  # 请根据最新版本进行更新

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

基本用法

1. 初始化 `EasyNav`

在你的 main.dart 文件中，你可以初始化 EasyNav 并设置初始页面：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: EasyNav(
        initialRoute: '/',
        routes: {
          '/': (context) => HomePage(),
          '/second': (context) => SecondPage(),
        },
      ),
    );
  }
}

2. 导航到新页面

在 HomePage 中，你可以使用 EasyNav.of(context).push 来导航到 SecondPage：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            EasyNav.of(context).push('/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

3. 返回上一页

在 SecondPage 中，你可以使用 EasyNav.of(context).pop 来返回到上一页：

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            EasyNav.of(context).pop();
          },
          child: Text('Go back to Home Page'),
        ),
      ),
    );
  }
}

高级用法

1. 传递参数

你可以通过 push 方法传递参数到新页面：

EasyNav.of(context).push('/second', arguments: {'name': 'John', 'age': 30});

在目标页面中，你可以通过 EasyNav.of(context).arguments 获取参数：

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = EasyNav.of(context).arguments as Map<String, dynamic>;
    final name = args['name'];
    final age = args['age'];

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('Hello $name, you are $age years old.'),
      ),
    );
  }
}

2. 替换当前页面

如果你想替换当前页面而不是压入新的页面，可以使用 replace 方法：

EasyNav.of(context).replace('/second');

3. 弹出到指定页面

你可以使用 popUntil 方法返回到指定的页面：

EasyNav.of(context).popUntil('/home');

Flutter导航管理插件easy_nav的使用