Flutter 核心技术详解一、Dart 语言基础1. 核心特性强类型 类型推断var name Kimi;编译器自动推断为String空安全Null SafetyString? nullable; String nonNull 必须赋值;一切皆对象包括null、函数、数字单线程事件循环基于Isolate实现并发主线程通过 Event Loop 处理异步任务2. 关键语法dart// 命名参数 默认值 void greet({String name World, required int age}) {} // 级联运算符 var paint Paint() ..color Colors.black ..strokeWidth 2.0; // 扩展运算符 var list [1, 2, ...anotherList]; // 箭头函数 var doubled numbers.map((n) n * 2);二、Widget 体系1. 两大分类类型特点示例StatelessWidget无状态UI 静态不变Text,Icon,ContainerStatefulWidget有状态通过setState()触发重建Checkbox,TextField2. Widget 树与三棵树Widget Tree配置层 → Element Tree实例层 → RenderObject Tree渲染层Widget轻量、不可变、描述配置ElementWidget的挂载实例管理生命周期RenderObject真正负责布局和绘制的对象3. 常用布局 Widget单孩子Container、Padding、Center、Expanded多孩子Row、Column、Stack、Wrap、ListView滚动SingleChildScrollView、CustomScrollView、PageView三、状态管理概述Flutter 状态管理方案演进方案复杂度适用场景setState低局部状态、简单页面InheritedWidget中跨组件传值底层机制Provider / Riverpod中中大型项目官方推荐GetX低快速开发全功能框架BLoC高复杂业务逻辑严格分层四、GetX 与 Obx 详解GetX 是一个轻量级、高性能的全能型 Flutter 框架集状态管理、路由管理、依赖注入于一体。1. 核心概念响应式状态Reactive State使用.obs将普通变量变为可观察对象dart// 定义 var count 0.obs; // int var name .obs; // String var items String[].obs; // ListObx 监听机制Obx是 GetX 的自动监听 Widget只包裹需要刷新的部分dartObx(() Text( ${controller.count}, // 当 count 变化时仅这个 Text 重建 style: TextStyle(fontSize: 20), ));2. 完整示例dartimport package:flutter/material.dart; import package:get/get.dart; // 1. 定义 Controller业务逻辑层 class CounterController extends GetxController { // 响应式变量 var count 0.obs; // 计算属性 String get display 当前计数: $count; void increment() count; void decrement() count--; } // 2. 页面 class CounterPage extends StatelessWidget { // 依赖注入将 Controller 放入内存 final controller Get.put(CounterController()); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(GetX 计数器)), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // 局部刷新只有 Obx 包裹的部分会重建 Obx(() Text( controller.display, style: TextStyle(fontSize: 24), )), SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: controller.decrement, child: Icon(Icons.remove), ), SizedBox(width: 20), ElevatedButton( onPressed: controller.increment, child: Icon(Icons.add), ), ], ), ], ), ), ); } } // 3. main.dart void main() { runApp(GetMaterialApp( // 必须用 GetMaterialApp 替换 MaterialApp home: CounterPage(), )); }3. Obx vs GetBuilder特性ObxGetBuilder监听方式自动追踪.obs变量手动调用update()重建粒度精确到使用变量的 Widget整个 GetBuilder 范围性能更高局部刷新中等代码量更少稍多dart// GetBuilder 示例手动更新 class ManualController extends GetxController { int count 0; void increment() { count; update(); // 必须手动触发刷新 } } GetBuilderManualController( builder: (ctrl) Text(${ctrl.count}), )4. 依赖注入 APIdart// 放入内存 final c1 Get.put(Controller()); // 实例化并注册 final c2 Get.lazyPut(() Controller()); // 懒加载 final c3 Get.putAsync(() async await Controller.init()); // 异步 // 读取 final ctrl Get.findController(); // 全局获取 // 删除 Get.deleteController(); // 释放资源五、Dio 网络请求库Dio 是 Dart 最强大的 HTTP 客户端支持拦截器、全局配置、FormData、文件上传/下载、请求取消等。1. 基础配置dartimport package:dio/dio.dart; class HttpClient { static final Dio dio Dio( BaseOptions( baseUrl: https://api.example.com, connectTimeout: Duration(seconds: 10), receiveTimeout: Duration(seconds: 10), headers: {Content-Type: application/json}, ), )..interceptors.addAll([ // 日志拦截器 LogInterceptor(requestBody: true, responseBody: true), // 自定义拦截器 InterceptorsWrapper( onRequest: (options, handler) { // 自动添加 Token options.headers[Authorization] Bearer $token; return handler.next(options); }, onResponse: (response, handler) { // 统一处理响应 return handler.next(response); }, onError: (error, handler) { // 统一错误处理如 401 跳转登录 if (error.response?.statusCode 401) { Get.toNamed(/login); } return handler.next(error); }, ), ]); }2. 请求示例dart// GET 请求 FutureListUser fetchUsers() async { try { final response await HttpClient.dio.get(/users); return (response.data as List) .map((json) User.fromJson(json)) .toList(); } on DioException catch (e) { // 类型化错误处理 switch (e.type) { case DioExceptionType.connectionTimeout: throw 连接超时; case DioExceptionType.badResponse: throw 服务器错误: ${e.response?.statusCode}; default: throw 网络异常; } } } // POST 请求JSON Futurevoid createUser(String name) async { final response await HttpClient.dio.post( /users, data: {name: name, age: 25}, ); } // 文件上传 Futurevoid uploadAvatar(File file) async { final formData FormData.fromMap({ file: await MultipartFile.fromFile(file.path, filename: avatar.jpg), }); final response await HttpClient.dio.post(/upload, data: formData); } // 下载文件 进度监听 Futurevoid downloadFile(String url, String savePath) async { await HttpClient.dio.download( url, savePath, onReceiveProgress: (received, total) { if (total ! -1) { final progress (received / total * 100).toStringAsFixed(0); print(下载进度: $progress%); } }, ); } // 请求取消防止页面销毁后回调 final cancelToken CancelToken(); HttpClient.dio.get(/long-request, cancelToken: cancelToken); // 页面 dispose 时调用 cancelToken.cancel(用户离开页面);六、异步编程详解Dart 是单线程事件循环模型异步通过Future和Stream实现。1. Future 与 async/awaitdart// 三种等价写法 // 1. Future 链式调用 fetchUser().then((user) { print(user.name); }).catchError((e) { print(错误: $e); }); // 2. async/await推荐 Futurevoid getUser() async { try { final user await fetchUser(); print(user.name); } catch (e) { print(错误: $e); } } // 3. 并发执行Future.wait Futurevoid getDashboard() async { final results await Future.wait([ fetchUser(), fetchOrders(), fetchNotifications(), ]); // 三个请求并行执行总耗时 最慢的那个 }2. Stream 流式编程dart// 创建 Stream Streamint countStream(int max) async* { for (int i 1; i max; i) { await Future.delayed(Duration(seconds: 1)); yield i; // 类似 return但不结束函数 } } // 监听 Stream void main() async { await for (var count in countStream(5)) { print(count); // 每秒输出 1, 2, 3, 4, 5 } } // Stream 转换 stream .where((event) event 10) // 过滤 .map((event) event * 2) // 映射 .distinct() // 去重 .listen((data) print(data));3. 在 GetX 中结合 Diodartclass UserController extends GetxController { var users User[].obs; var isLoading false.obs; var error .obs; Futurevoid loadUsers() async { try { isLoading.value true; error.value ; final result await HttpClient.dio.get(/users); users.value (result.data as List) .map((json) User.fromJson(json)) .toList(); } catch (e) { error.value e.toString(); } finally { isLoading.value false; } } } // UI 层 Obx(() { if (controller.isLoading.value) return CircularProgressIndicator(); if (controller.error.value.isNotEmpty) return Text(错误: ${controller.error}); return ListView.builder( itemCount: controller.users.length, itemBuilder: (_, i) ListTile(title: Text(controller.users[i].name)), ); });七、完整架构建议plainlib/ ├── main.dart # 入口GetMaterialApp ├── routes/ │ └── app_pages.dart # GetX 路由配置 ├── modules/ │ └── home/ │ ├── bindings/ # 依赖绑定 │ ├── controllers/ # GetXController状态逻辑 │ └── views/ # 页面纯 UI ├── data/ │ ├── providers/ # Dio 封装 │ ├── models/ # 数据模型 │ └── repositories/ # 数据仓库 └── core/ ├── values/ # 常量、主题 └── utils/ # 工具函数这套技术栈组合Dart Widget GetX Dio能够支撑从中小型到大型 Flutter 项目的全周期开发GetX 的响应式编程模型与 Dio 的拦截器机制配合可以实现非常优雅的代码分层。
