Flutter系列之五：路由管理与导航框架（fluro 2.0.3）

先补充上节的一个知识点 GestureDetector：

A widget that detects gestures.

这是一个检测手势的小部件。GestureDetector在Flutter中负责处理跟用户的简单手势交互，并作出相应的处理，包括点击、拖动和缩放。

还有一个child属性，这就意味着我们可以利用GestureDetector包裹本身不支持点击回调事件的Widget赋予它们点击回调能力，像Text、Image。

回归正题，Fluro作为一款优秀的Flutter企业级路由框架，将分散的路由页面统一管理，并集中导航分发。

添加依赖，并执行 【Pub upgrade】：

dependencies:
  flutter:
    sdk: flutter
  fluro: ^2.0.3

Fluro 使用步骤说明：路由映射（管理路由）、路由配置、Router静态化。

1、创建 application.dart ，方便直接调用

import 'package:fluro/fluro.dart';

class Application {
  static late final FluroRouter router;
}

2、创建一个页面 page_a.dart

import 'package:flutter/material.dart';

class PageA extends StatefulWidget {
  const PageA({Key? key}) : super(key: key);
  @override
  _SettingState createState() => _SettingState();
}

class _SettingState extends State<PageA> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Page A, click here back main page!'),
          leading: Builder(
              builder: (BuildContext context){
                return IconButton(
                  icon: const Icon(Icons.arrow_back),
                  onPressed:(){
                    Navigator.pop(context);
                  }
                );
              }
          ),
        ),
        body:const Center(
          child: Text('Page A'),
        ),
    );
  }
}

3、路由映射 ，创建 route_handles.dart

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

import 'package:flutter_app_test/pages/home/page_a.dart';
import 'package:flutter_app_test/pages/main.dart';

var aHandler = Handler(
    handlerFunc: (BuildContext? context, Map<String, List<Object>> params) {
      return PageA();
    });



var mainHandler = Handler(
    handlerFunc: (BuildContext? context, Map<String, List<Object>> params) {
      return Main();
    });

4、路由配置 ，创建 route.dart

import 'package:fluro/fluro.dart';
import 'package:flutter_app_test/pages/home/route_handles.dart';

class Routes {
  static String page_main = "/";
  static String page_a = "/a";

  static void configureRoutes(FluroRouter router) {
    router.define(page_main, handler: mainHandler);
    router.define(page_a, handler: aHandler);
  }
}

5、创建主页面 main.dart

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

import 'package:flutter_app_test/pages/application.dart';
import 'package:flutter_app_test/pages/route.dart';

void main() {
  FluroRouter  router = FluroRouter();
  Application.router = router; //一定要先写这行
  Routes.configureRoutes(router);
  runApp(Main());
}

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MainPage());
  }
}
class MainPage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<MainPage> {  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Page Main'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              Application.router.navigateTo(context, "/a");
            },
            child: const Text('首页，点击跳转到 Page A',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.black, decoration: TextDecoration.none),
            )
          )
        ),
      );
  }
}

源码地址：GitHub - hhbbeijing/flutter_app_test   日期：2022-5-6