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});@overrideWidget 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});@overrideWidget 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});@overrideWidget 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});@overrideState<HomePage> createState() => HomePageState(); // 创建关联的State
}class HomePageState extends State<HomePage> {int _counter = 0;void _incrementCounter() {setState(() { // 状态更新方法_counter++;});print('arguments: ${widget.arguments}');}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home')),body: Center(child: ElevatedButton(child: Text('Click Increment: $_counter'),onPressed: _incrementCounter,),),);}
}