Flutter 知识点总结
Flutter 知识点总结
一、基础概念
-
Flutter 是什么
- Google 开源的跨平台 UI 框架
- 使用 Dart 语言编写
- 通过 Skia 图形引擎直接绘制 UI,不依赖原生控件
-
核心特点
- 高性能(60/120fps)
- 跨平台(iOS/Android/Web/Windows/macOS/Linux)
- 热重载(Hot Reload)
- 声明式 UI
二、Dart 语言要点
-
基础语法
- 强类型语言(支持类型推断)
- 所有对象都是类的实例
- 支持 async/await
- 单线程+事件循环
-
重要概念
// 空安全 String? nullableString = null;// Future 异步处理 Future<void> fetchData() async {var data = await http.get(url); }// Stream 数据流 Stream<int> countStream() async* {for(int i=0; i<10; i++) {await Future.delayed(Duration(seconds: 1));yield i;} }
三、Widget 体系
-
Widget 分类
- 有状态 Widget:
StatefulWidget
- 无状态 Widget:
StatelessWidget
- 渲染 Widget:
RenderObjectWidget
- 有状态 Widget:
-
常用 Widget
// 基础组件 Text('Hello'), Icon(Icons.star), Image.network(url)// 布局组件 Row(), Column(), Stack(), Flex()// 容器组件 Container(), Padding(), Center(), SizedBox()// 滚动组件 ListView(), GridView(), SingleChildScrollView()// 功能组件 GestureDetector(), InkWell(), Navigator()
-
生命周期
- StatelessWidget:build()
- StatefulWidget:
createState() → initState() → didChangeDependencies() → build() → didUpdateWidget() → deactivate() → dispose()
四、布局与样式
-
布局模型
- 约束向下(父→子)
- 尺寸向上(子→父)
- 父组件决定位置
-
常用布局方式
// 弹性布局 Flex(direction: Axis.horizontal,children: [Expanded(flex:2, child:...), Expanded(flex:1, child:...)] )// 层叠布局 Stack(alignment: Alignment.center,children: [Background(), Positioned(top:10, child: FloatingButton())] )
-
样式处理
// 主题 Theme(data: ThemeData(primaryColor: Colors.blue),child: Text('Hello', style: Theme.of(context).textTheme.headline6) )// 自定义样式 BoxDecoration(gradient: LinearGradient(colors: [Colors.red, Colors.orange]),borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(blurRadius: 10)] )
五、状态管理
-
基础方式
setState
:局部状态InheritedWidget
:祖先共享数据
-
常用方案
- Provider:最常用的轻量级方案
- Riverpod:Provider 的改进版
- Bloc:事件驱动状态管理
- GetX:简洁的全家桶方案
- Redux:单向数据流
-
Provider 示例
// 定义 Model class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();} }// 提供数据 ChangeNotifierProvider(create: (_) => Counter(),child: MyApp() )// 使用数据 Consumer<Counter>(builder: (context, counter, _) => Text('${counter.count}') )
六、路由与导航
-
基本导航
// 跳转 Navigator.push(context, MaterialPageRoute(builder: (_) => DetailPage()));// 返回 Navigator.pop(context, '返回数据');
-
命名路由
// 注册路由 MaterialApp(routes: {'/': (context) => HomePage(),'/detail': (context) => DetailPage()} )// 使用 Navigator.pushNamed(context, '/detail', arguments: '数据');
-
路由守卫
MaterialApp(onGenerateRoute: (settings) {if(需要登录 && !已登录) {return MaterialPageRoute(builder: (_) => LoginPage());}return MaterialPageRoute(builder: (_) => settings.name == '/detail' ? DetailPage() : HomePage());} )
七、网络请求
-
http 包
import 'package:http/http.dart' as http;Future<void> fetchData() async {final response = await http.get(Uri.parse('https://api.example.com/data'));if(response.statusCode == 200) {print(response.body);} }
-
Dio(推荐)
final dio = Dio(); final response = await dio.get('/data', queryParameters: {'page':1},options: Options(headers: {'token':'xxx'}) );
-
JSON 解析
// 手动解析 Map<String, dynamic> data = jsonDecode(response.body);// 自动生成(json_serializable) () class User {final String name;final int age;factory User.fromJson(Map<String,dynamic> json) => _$UserFromJson(json);Map<String,dynamic> toJson() => _$UserToJson(this); }
八、数据持久化
-
shared_preferences
final prefs = await SharedPreferences.getInstance(); await prefs.setString('token', 'abc123'); String token = prefs.getString('token');
-
SQLite(sqflite)
final db = await openDatabase('my_db.db'); await db.execute('CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY, name TEXT)'); await db.insert('users', {'name': 'Jack'}); List<Map> users = await db.query('users');
-
Hive(高性能 NoSQL)
var box = await Hive.openBox('myBox'); box.put('name', 'Lisa'); print(box.get('name'));
九、动画系统
-
基础动画
AnimationController(duration: Duration(seconds:1),vsync: this )..forward();FadeTransition(opacity: CurvedAnimation(parent: controller,curve: Curves.easeIn),child: Text('淡入淡出') )
-
Hero 动画
// 页面1 Hero(tag: 'avatar', child: Image.asset('avatar.png'))// 页面2 Hero(tag: 'avatar', child: Image.asset('avatar.png'))
-
物理动画
SpringSimulation(SpringDescription(mass:1, stiffness:100, damping:10),0.0, // 起始位置300.0,// 结束位置10.0 // 初始速度 )
十、测试与调试
-
单元测试
test('Counter increments', () {final counter = Counter();counter.increment();expect(counter.value, 1); });
-
Widget 测试
testWidgets('MyWidget has a title', (tester) async {await tester.pumpWidget(MyWidget(title: 'T'));expect(find.text('T'), findsOneWidget); });
-
调试工具
- Flutter Inspector:检查 Widget 树
- Performance Overlay:性能分析
- Dart DevTools:全面的调试工具集
十一、进阶主题
-
Platform Channels
- 与原生平台通信
- 支持 MethodChannel/EventChannel/BasicMessageChannel
-
Isolate
void heavyTask(SendPort port) {// 计算密集型任务port.send(result); }final receivePort = ReceivePort(); await Isolate.spawn(heavyTask, receivePort.sendPort); receivePort.listen((data) => print(data));
-
Flutter Web
- 同一套代码编译为 Web 应用
- 注意区分平台特定代码
-
Flutter 桌面端
- Windows/macOS/Linux 支持
- 系统菜单、原生窗口管理等特性
十二、最佳实践
-
代码组织
lib/ ├── models/ # 数据模型 ├── services/ # 业务逻辑 ├── repositories/ # 数据仓库 ├── pages/ # 页面 ├── widgets/ # 公用组件 └── main.dart # 入口文件
-
性能优化
- 避免 build() 方法中执行耗时操作
- 使用 const 构造函数
- 合理使用 ListView.builder
- 减少不必要的重绘
-
国际化
MaterialApp(localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],supportedLocales: [const Locale('en', 'US'),const Locale('zh', 'CN'),], )
-
打包发布
# Android flutter build appbundle # iOS flutter build ipa # Web flutter build web
十三、生态资源
-
官方资源
- flutter.dev
- Flutter GitHub
- Pub.dev 包仓库
-
学习资源
- Flutter 官方文档
- 《Flutter 实战》开源电子书
- Flutter 社区(掘金、CSDN、StackOverflow)
-
常用插件
- http/dio:网络请求
- provider/riverpod:状态管理
- shared_preferences/hive:本地存储
- get_it:依赖注入
- cached_network_image:图片缓存
- flutter_bloc:BLoC 模式
这个总结涵盖了 Flutter 开发的主要知识点,可以作为学习路线图或速查参考。实际开发中应根据项目需求选择合适的技术方案。