Flutter 知识点总结-EW帮帮网

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

// 基础组件
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）
@JsonSerializable()
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 开发的主要知识点，可以作为学习路线图或速查参考。实际开发中应根据项目需求选择合适的技术方案。

Flutter 知识点总结

Flutter 知识点总结

一、基础概念

二、Dart 语言要点

三、Widget 体系

四、布局与样式

五、状态管理

六、路由与导航

七、网络请求

八、数据持久化

九、动画系统

十、测试与调试

十一、进阶主题

十二、最佳实践

十三、生态资源

网站公告

今日签到

热门文章

最新发布