Flutter路由管理插件ui

Flutter路由管理插件ui_router的使用

路由配置

首先，我们需要定义一个路由配置。UiRouter类用于定义应用程序中的页面路径及其对应的构建器。

final router = UiRouter(
  pages: [
    UiPage(
      path: '/index',
      build: (state) => const MyIndexPage(),
    ),
    UiShell(
      path: '/shell',
      build: (state, child) => MyShell(child: child),
      pages: [
        UiPage(
          path: '/sub-1',
          build: (state) => const MySub1Page(),
        ),
        UiPage(
          path: '/sub-2',
          build: (state) => const MySub2Page(),
        ),
      ],
    ),
  ],
);

运行应用

接下来，我们设置应用的主入口点，并将路由视图作为主页。

void main() {
  // 创建路由视图
  final view = UiRouterView(router);
  // 设置MaterialApp的主页为路由视图
  final app = MaterialApp(home: view);
  // 运行应用
  runApp(app);
}

示例页面

Index页面

这是应用的首页，用户点击按钮可以跳转到/shell路径。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Index')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到/shell路径
            router.push('/shell');
          },
          child: const Text('Push To Shell'),
        ),
      ),
    );
  }
}

Shell页面

这是一个包含子页面的壳页面。它会根据当前路径展示不同的子页面。

class MyShell extends StatelessWidget {
  const MyShell({
    super.key,
    required this.child,
  });

  final Widget child;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(title: const Text('Shell')),
      body: Center(
        child: SizedBox(
          width: 300,
          height: 500,
          child: child,
        ),
      ),
    );
  }
}

Sub1页面

这是壳页面下的第一个子页面，用户点击按钮可以跳转到/sub-2路径。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sub 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到/shell/sub-2路径
            router.shell('/shell').push('/sub-2');
          },
          child: const Text('Push To Sub2'),
        ),
      ),
    );
  }
}

Sub2页面

这是壳页面下的第二个子页面。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sub 2')),
    );
  }
}

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

yuanlaile 1楼

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

ui_router 是一个用于 Flutter 应用的路由管理插件，它提供了一种简单且灵活的方式来管理应用的导航和路由。通过 ui_router，你可以定义路由、处理导航、传递参数，并且支持嵌套路由等高级功能。

1. 安装 `ui_router`

首先，在你的 pubspec.yaml 文件中添加 ui_router 依赖：

dependencies:
  flutter:
    sdk: flutter
  ui_router: ^0.0.1 # 请使用最新版本

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

2. 基本使用

2.1 定义路由

你需要创建一个 Router 对象，并在其中定义应用的各个路由。

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

void main() {
  final router = Router(
    routes: {
      '/': RouteDefinition(
        path: '/',
        builder: (context, params) => HomeScreen(),
      ),
      '/details': RouteDefinition(
        path: '/details',
        builder: (context, params) => DetailsScreen(),
      ),
    },
  );

  runApp(MyApp(router: router));
}

class MyApp extends StatelessWidget {
  final Router router;

  MyApp({required this.router});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Router.of(context).push('/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Router.of(context).pop();
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

2.2 导航

在 ui_router 中，你可以使用 Router.of(context).push('/route') 来导航到另一个页面，使用 Router.of(context).pop() 返回到上一个页面。

3. 传递参数

你可以通过 RouteDefinition 的 builder 方法传递参数：

routes: {
  '/details': RouteDefinition(
    path: '/details',
    builder: (context, params) => DetailsScreen(param: params['id']),
  ),
},

在导航时传递参数：

Router.of(context).push('/details', params: {'id': '123'});

在 DetailsScreen 中接收参数：

class DetailsScreen extends StatelessWidget {
  final String param;

  DetailsScreen({required this.param});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: Text('Parameter: $param'),
      ),
    );
  }
}

4. 嵌套路由

ui_router 支持嵌套路由，允许你在一个页面中嵌套另一个路由。

routes: {
  '/parent': RouteDefinition(
    path: '/parent',
    builder: (context, params) => ParentScreen(),
    children: {
      '/child': RouteDefinition(
        path: '/child',
        builder: (context, params) => ChildScreen(),
      ),
    },
  ),
},

Flutter路由管理插件ui_router的使用