[移动开发] Flutter系列之五：路由管理与导航框架（fluro 2.0.3）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Flutter系列之五：路由管理与导航框架（fluro 2.0.3） -> 正文阅读

[移动开发]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