Flutter路由管理插件xapptor_router的使用

Flutter路由管理插件xapptor_router的使用

Xapptor Router

pub package

路由模块用于Web和移动导航。

让我们开始吧

1 - 依赖它

在你的包的pubspec.yaml文件中添加它：

dependencies:
    xapptor_router: ^0.0.2

2 - 安装它

从命令行安装包：

flutter pub get

3 - 像掌握一样学习它

在你的main.dart中调用start_screens_config函数
Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    Paint.enableDithering = true;
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    start_screens_config();
}
创建start_screens_config函数
设置当前构建模式
current_build_mode = BuildMode.release;
设置起始屏幕
landing_screen = Landing();
设置未知屏幕
unknown_screen = UnknownScreen(
    logo_path: logo_image_path,
);
添加新的应用屏幕
add_new_app_screen(
    AppScreen(
        name: "login",
        child: UserInfoView(
            text_list: [
                "Email",
                "Password",
                "Remember me",
                "Log In",
                "Recover password",
                "Register",
            ],
            tc_and_pp_text: RichText(text: TextSpan()),
            gender_values: [],
            country_values: [],
            text_color: Colors.blue,
            first_button_color: Colors.white,
            second_button_color: Colors.white,
            third_button_color: Colors.white,
            logo_image_path: "your_image_path",
            has_language_picker: false,
            topbar_color: Colors.blue,
            custom_background: null,
            user_info_form_type: UserInfoFormType.login,
            outline_border: true,
            first_button_action: null,
            second_button_action: open_forgot_password,
            third_button_action: open_register,
            has_back_button: true,
            text_field_background_color: null,
        ),
    ),
);
添加更多屏幕
add_new_app_screen(
    AppScreen(
        name: "privacy_policy",
        child: PrivacyPolicy(
            base_url: "https://www.domain.com",
            use_topbar: false,
            topbar_color: Colors.blue,
        ),
    ),
);

add_new_app_screen(
    AppScreen(
        name: "home",
        child: Home(),
    ),
);
最后一步是使用默认的Xapptor App类调用runApp函数，并设置你的应用名称和主题
runApp(
    App(
        app_name: "MyAppName",
        theme: ThemeData(
            primarySwatch: your_material_color,
            fontFamily: 'VarelaRound',
            textButtonTheme: TextButtonThemeData(
                style: TextButton.styleFrom(
                    padding: EdgeInsets.only(
                        left: 20,
                        right: 20,
                    ),
                ),
            ),
        ),
    ),
);

你可以通过调用open_screen函数并传递屏幕名称来打开一个屏幕：

open_screen("home/courses");

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

1 回复

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


xapptor_router 是一个用于 Flutter 应用的路由管理插件，它简化了路由导航和管理的复杂性，提供了一种更直观和灵活的方式来处理应用程序中的页面跳转。以下是如何使用 xapptor_router 插件的基本步骤。

1. 添加依赖

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

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

然后运行 flutter pub get 来获取依赖。

2. 初始化路由管理器

在你的 main.dart 文件中，初始化 xapptor_router 并设置初始路由。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: XapptorRouter.onGenerateRoute,
    );
  }
}

3. 定义路由

在你的应用中定义路由。你可以通过创建一个 routes.dart 文件来集中管理路由。

import 'package:xapptor_router/xapptor_router.dart';
import 'package:flutter/material.dart';
import 'home_page.dart';
import 'detail_page.dart';

class Routes {
  static final routes = {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  };
}

4. 使用路由导航

在你的应用中使用 XapptorRouter 进行页面导航。

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            XapptorRouter.pushNamed(context, '/detail');
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            XapptorRouter.pop(context);
          },
          child: Text('Go back'),
        ),
      ),
    );
  }
}

5. 高级功能

xapptor_router 还支持一些高级功能，如传递参数、处理回退等。

传递参数

你可以通过 arguments 参数传递数据到目标页面。

XapptorRouter.pushNamed(context, '/detail', arguments: {'id': 123});

在目标页面中，你可以通过 ModalRoute.of(context).settings.arguments 获取传递的参数。

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Map<String, dynamic> args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: Text('ID: ${args['id']}'),
      ),
    );
  }
}

处理回退

你可以在 XapptorRouter 中定义自定义的回退逻辑。

XapptorRouter.pop(context);
回到顶部