GetX框架里容易被忽略的那些小知识（一）

GetMaterialApp 是 GetX 提供的一个扩展自 Flutter MaterialApp 的类，集成了 GetX 的路由管理功能，而 getPages 则是 GetMaterialApp 中用于定义应用路由的属性。

1. 基本用法

在 GetMaterialApp 中，通过 getPages 属性传递一个 GetPage 类型的 List 来定义应用的所有路由。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'login_page.dart';
import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Demo',
      getPages: [
        GetPage(name: '/login', page: () => LoginPage()),
        GetPage(name: '/home', page: () => HomePage()),
      ],
    );
  }
}

2. 定义路由的不同形式

单一路由

这是最基本的路由定义方式，每个路由对应一个页面。

GetPage(
  name: '/home',
  page: () => HomePage(),
),
GetPage(
  name: '/about',
  page: () => AboutPage(),
),

带参路由

可以通过路由传递参数，实现页面之间的数据传递。

GetPage(
  name: '/details/:id',
  page: () => DetailsPage(),
),

Get.toNamed('/details/123');

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String id = Get.parameters['id']!;
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(child: Text('Item ID: $id')),
    );
  }
}

动态路由

一般情况下，带参路由会被当作动态路由来使用。

GetPage(
  name: '/user/:id',
  page: () => UserPage(),
),

String userId = 'user_001';
Get.toNamed('/user/$userId');

class UserPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String id = Get.parameters['id']!;
    return Scaffold(
      appBar: AppBar(title: Text('User')),
      body: Center(child: Text('User ID: $id')),
    );
  }
}

嵌套路由

支持多层级的嵌套路由，适用于具有子页面的复杂导航结构，如底部导航栏中的不同标签页。

GetPage(
  name: '/parent',
  page: () => ParentPage(),
  children: [
    GetPage(name: '/child1', page: () => ChildPage1()),
    GetPage(name: '/child2', page: () => ChildPage2()),
  ],
),

Get.toNamed('/parent/child1');
Get.toNamed('/parent/child2');

3. 结论

GetMaterialApp 的 getPages 提供了灵活且强大的路由管理功能。通过正确地定义和配置 getPages，可以轻松实现复杂的导航需求。

后续还会继续更新 GetPage 中 GetMiddleware 的内容，敬请期待！