Flutter协调器管理插件nd_coordinators的使用

Flutter协调器管理插件nd_coordinators的使用

nd_coordinators 是一个用于管理协调器模式的小型实用库。它可以帮助开发者更好地组织和管理复杂的页面导航逻辑。

使用说明

以下是一个完整的示例,展示如何使用 nd_coordinators 来管理页面导航。

示例代码

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

void main() {
  // 创建第一个流程的协调器
  final flow1Coordinator = MyFlowCoordinator();

  // 创建入口页面的协调器
  final entryCoordinator = NDClosureEmbeddedCoordinator(
      builder: (context) => EntryPage(onPressed: flow1Coordinator.start));

  // 创建应用程序的协调器
  final appCoordinator = NDClosureApplicationCoordinator(
    builder: () => MyApp(
      builder: entryCoordinator.build,
    ),
  );

  // 启动应用程序
  appCoordinator.startApp();
}

// 定义一个自定义的流协调器
class MyFlowCoordinator extends NDFlowCoordinator {
  [@override](/user/override)
  Future<bool?> start(BuildContext context) async {
    // 1 -> 3 -> 2
    _step1 = NDNavigatorPushCoordinator(
      name: 'Step 1',
      widgetBuilder: (context) {
        return StepPage(
            value: '1', onPressed: (context) => _step2?.start(context));
      },
    );

    _step2 = NDNavigatorPushCoordinator(
      name: 'Step 2',
      widgetBuilder: (context) {
        return StepPage(
            value: '3', onPressed: (context) => _step3?.start(context));
      },
    );

    _step3 = NDNavigatorPushCoordinator(
      name: 'Step 3',
      widgetBuilder: (context) {
        return StepPage(
          value: '2',
          onPressed: (context) => Navigator.of(context).popUntil(
            ModalRoute.withName('Step 1'),
          ),
        );
      },
    );

    // 启动第一步
    _step1?.start(context);
  }

  // 私有变量用于存储步骤协调器
  NDFlowCoordinator? _step1;
  NDFlowCoordinator? _step2;
  NDFlowCoordinator? _step3;
}

// 定义应用程序的根组件
class MyApp extends StatelessWidget {
  final WidgetBuilder builder;

  const MyApp({
    Key? key,
    required this.builder,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: builder(context),
    );
  }
}

// 定义入口页面
class EntryPage extends StatelessWidget {
  final Function(BuildContext context) onPressed;

  const EntryPage({Key? key, required this.onPressed}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: const Text('Start'),
          onPressed: () => onPressed(context),
        ),
      ),
    );
  }
}

// 定义步骤页面
class StepPage extends StatelessWidget {
  final String value;
  final void Function(BuildContext) onPressed;

  const StepPage({
    Key? key,
    required this.value,
    required this.onPressed,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(value),
      ),
      body: Center(
        child: TextButton(
          onPressed: () => onPressed(context),
          child: const Text('Next'),
        ),
      ),
    );
  }
}

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

1 回复

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


nd_coordinators 是一个用于 Flutter 的协调器管理插件,它帮助开发者更好地管理页面导航和状态。通过使用协调器(Coordinator),你可以将页面导航逻辑从 UI 层分离出来,使得代码更加清晰和易于维护。

安装 nd_coordinators

首先,你需要在 pubspec.yaml 文件中添加 nd_coordinators 依赖:

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

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

基本使用

1. 创建协调器

协调器是管理页面导航的核心。你可以通过继承 Coordinator 类来创建自定义的协调器。

import 'package:nd_coordinators/nd_coordinators.dart';

class MyCoordinator extends Coordinator {
  MyCoordinator(BuildContext context) : super(context);

  void navigateToNextPage() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NextPage()),
    );
  }

  void goBack() {
    Navigator.pop(context);
  }
}

2. 在页面中使用协调器

在页面中,你可以通过 CoordinatorProvider 来提供协调器,并在需要的地方使用它。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CoordinatorProvider(
      create: (context) => MyCoordinator(context),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Welcome to the Home Page!'),
              ElevatedButton(
                onPressed: () {
                  final coordinator = CoordinatorProvider.of<MyCoordinator>(context);
                  coordinator.navigateToNextPage();
                },
                child: Text('Go to Next Page'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final coordinator = CoordinatorProvider.of<MyCoordinator>(context);
            coordinator.goBack();
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

3. 启动应用

main.dart 中启动应用:

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

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

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

高级用法

1. 多个协调器

你可以在不同的页面中使用不同的协调器,或者在一个页面中使用多个协调器来管理不同的导航逻辑。

class AnotherCoordinator extends Coordinator {
  AnotherCoordinator(BuildContext context) : super(context);

  void navigateToAnotherPage() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AnotherPage()),
    );
  }
}

在页面中使用多个协调器:

CoordinatorProvider(
  create: (context) => MyCoordinator(context),
  child: CoordinatorProvider(
    create: (context) => AnotherCoordinator(context),
    child: Scaffold(
      // ...
    ),
  ),
);

2. 协调器生命周期

协调器可以监听页面的生命周期事件,例如 initStatedispose。你可以在协调器中重写这些方法来执行相应的操作。

class MyCoordinator extends Coordinator {
  MyCoordinator(BuildContext context) : super(context);

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化操作
  }

  [@override](/user/override)
  void dispose() {
    // 清理操作
    super.dispose();
  }
}
回到顶部