Flutter - 应用启动/路由管理

一、应用入口

1. 初始化 Flutter 底层绑定 ，运行 App。

import 'package:flutter/material.dart';
import 'package:flutter_base/Application.dart';

void main() {
  // 确保绑定初始化
  WidgetsFlutterBinding.ensureInitialized();

  // App初始化
  Application.init();
}

2. 注册 SDK /组件服务，配置命名路由。

import 'package:flutter/material.dart';
import 'package:flutter_base/LoginPage.dart';
import 'package:flutter_base/HomePage.dart';

class Application {
  static void init() {
    registerService();
    runApp(const AppContainer());
  }

  static void registerService() {
    // 注册SDK|组件服务
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Application',
      initialRoute: '/LoginPage',
      routes: {
        '/LoginPage': (context) => const LoginPage(),
        '/HomePage': (context) => const HomePage()
      }
    );
  }
}

二、页面路由

1. 命名路由

命名路由（Named Routes）是一种使用预定义名称来管理和访问路由的机制。这种方法使代码更易于理解和维护，特别是在具有多个页面的复杂应用程序中。

2. 路由配置

MaterialApp 是 Flutter 框架中用于构建遵循 Material Design 规范的应用程序根组件。

• title：应用标题
• home：应用启动时显示的初始页面
• initialRoute：指定初始路由名称（若设置，则忽略 home属性）
• routes：静态路由表，预定义命名路由与页面的映射关系
• onGenerateRoute：动态生成路由，处理未在 routes中定义的路径
• ​​onUnknownRoute：当所有路由规则均不匹配时的兜底处理（如显示 404 页面）

import 'package:flutter/material.dart';
import 'package:flutter_base/LoginPage.dart';
import 'package:flutter_base/HomePage.dart';
import 'package:flutter_base/ErrorPage.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Application',
      initialRoute: Navigator.defaultRouteName,
      routes: {
        '/': (context) => const LoginPage(name: 'Login'),
        '/HomePage': (context) => const HomePage(name: 'Home')
      },
      onGenerateRoute: (settings) {
        print('onGenerateRoute: settings-$settings');
        if (settings.name == '/LoginPage') {
          return MaterialPageRoute(builder: (context) => LoginPage(name: 'Login'));
        }
      },
      onUnknownRoute: (settings) {
        print('onUnknownRoute: settings-$settings');
        return MaterialPageRoute(builder: (context) => ErrorPage(name: 'Error'));
      }
    );
  }
}

先查询 routes 静态路由表，未映射到自定义路由时，触发 onGenerateRoute，当所有路由规则均不匹配时，触发 onUnknownRoute。

3. 页面传参

3.1 跳转页面的参数传递

class LoginPageState extends State<LoginPage> {
  void push() {
    // pushNamed传递参数
    Navigator.pushNamed(context, '/HomePage', arguments: {'title': '首页'});

    // 构造函数传递参数
    Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage(arguments: {'title': '首页'}));
  }  
}

3.2 命名路由的参数获取

在命名路由的回调方法中获取 settings 参数，通过 HomePage 的构造函数传递。

MaterialApp(
  ...
  onGenerateRoute: (settings) {
    if (settings.name == '/HomePage') {
      Map<String, dynamic>?  _arguments;
      if (settings.arguments != null) {
        _arguments = settings.arguments as Map<String, dynamic>;
      }
      return MaterialPageRoute(builder: (context) => HomePage(arguments: _arguments));
    }
  }
);

3.3 目标页面的参数获取

目标页面通过 ModalRoute.of(context) 获取 settings 参数。

class HomePageState extends State<HomePage> {
  void getSettings() {
    final modalRoute = ModalRoute.of(context);
    if (modalRoute != null) {
      final settings = modalRoute.settings;
      print('settings: name-${settings.name}, arguments-${settings.arguments}');
    }
  }
}

三、组件定制

1. 无状态组件

无状态组件（StatelessWidget）的所有属性均通过 final 声明，创建后无法修改。任何 UI 变化都需重建新的 Widget 实例。

import 'package:flutter/material.dart';

class CustomText extends StatelessWidget {
  final String content; // 不可变属性
  const CustomText({required this.content});

  @override
  Widget build(BuildContext context) {
    return Text(content); // UI 仅依赖初始配置
  }
}

2. 有状态组件

有状态组件（StatefulWidget）通过分离不可变的 Widget 配置与可变的 State 对象，实现高效的状态管理和 UI 更新机制。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  final Map<String, dynamic>? arguments;
  const HomePage({super.key, this.arguments});

  @override
  State<HomePage> createState() => HomePageState(); // 创建关联的State
}

class HomePageState extends State<HomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() { // 状态更新方法
      _counter++;
    });

    print('arguments: ${widget.arguments}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          child: Text('Click Increment: $_counter'),
          onPressed: _incrementCounter,
        ),
      ),
    );
  }
}