Flutter事件导航插件event_navigation的使用

event_navigation 是一个基于 event_bloc 库构建的库，用于处理基于事件的导航逻辑。本文将详细介绍如何在 Flutter 应用中使用 event_navigation 插件。

获取开始

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

dependencies:
  event_navigation: ^版本号

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

完整示例

我们将通过一个简单的应用来展示如何使用 event_navigation 插件。

示例代码

import 'package:event_bloc/event_bloc_widgets.dart';
import 'package:event_navigation/event_navigation.dart';
import 'package:event_navigation_example/bloc.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_, channel) => generateNavigationBloc(channel),
      child: _InnerApp(),
    );
  }
}

class _InnerApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EventNavigationApp(
      title: 'VHCBlade',
      builder: (_) => Overlay(
        initialEntries: [
          OverlayEntry(
            builder: (context) => Navigator(
              onGenerateRoute: (_) => MaterialPageRoute(
                builder: (_) => const MainScreen(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final bloc = context.watchBloc<MainNavigationBloc<String>>();
    final navigationBar = MainNavigationBar(
      currentNavigation: bloc.currentMainNavigation,
      navigationPossibilities: const ['home', 'blog', 'apps', 'about'],
      builder: (index, onTap) => BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: index,
        onTap: onTap,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.bar_chart), label: 'Blog'),
          BottomNavigationBarItem(icon: Icon(Icons.push_pin), label: 'Apps'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'About'),
        ],
      ),
    );
    return Scaffold(
      bottomNavigationBar: navigationBar,
      body: const MainTransferScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (context.watchNavigationBloc<String>().currentMainNavigation == 'error') {
      return const Text('发生了一个意外错误');
    }
    return MainNavigationFullScreenCarousel(
      navigationOptions: const ['home', 'blog', 'apps', 'about'],
      navigationBuilder: (_, navigation) {
        switch (navigation) {
          case 'home':
            return Container(color: const Color(0xFFFF0000)); // 红色
          case 'blog':
            return Container(
              color: const Color(0xFF01204C), // 蓝色
              child: const BlogScreen(),
            );
          case 'apps':
            return Container(color: const Color(0xFF00FF00)); // 绿色
          case 'about':
            return Container(color: const Color(0xFF0000FF)); // 蓝色
          default:
            return Container(color: const Color(0xFF000000)); // 黑色
        }
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final bloc = context.watchNavigationBloc<String>();

    if (bloc.deepNavigationMap['blog'] == null) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () => context.pushDeepNavigation('one'),
            child: const Text('1'),
          ),
          ElevatedButton(
            onPressed: () => context.pushDeepNavigation('two'),
            child: const Text('2'),
          ),
          ElevatedButton(
            onPressed: () => context.pushDeepNavigation('three'),
            child: const Text('3'),
          ),
        ],
      );
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () => context.popDeepNavigation(),
          child: const Text('返回'),
        ),
        ElevatedButton(
          onPressed: () => context.pushDeepNavigation('one'),
          child: const Text('1'),
        ),
        ElevatedButton(
          onPressed: () => context.pushDeepNavigation('two'),
          child: const Text('2'),
        ),
      ],
    );
  }
}