Flutter 跨平台开发入门教程

第一章：Flutter 架构解析

Flutter 应用分为三层：

┌─────────────┐
│  Dart 代码   │  ← Widget / State / 业务逻辑
├─────────────┤
│  Engine     │  ← C++：Skia/Impeller 渲染、Dart VM
├─────────────┤
│  Embedder   │  ← 平台胶水层：Surface、纹理、输入事件
└─────────────┘

关键区别：Flutter 不调用 OEM 控件，而是直接用 Skia/Impeller 画布渲染每个像素。这带来跨平台像素级一致性，但也意味着包体中包含整个渲染引擎。

第二章：Widget 即一切

Flutter 世界只有一个核心概念：Widget。

• 按钮是 Widget
• 布局（Row/Column/Stack）是 Widget
• 主题是 Widget
• 手势检测是 Widget

组合优于继承

// 一个自定义搜索框 = 组合多个基础 Widget
Row(
  children: [
    Icon(Icons.search),
    SizedBox(width: 8),
    Text('搜索...'),
    Spacer(),
    IconButton(icon: Icon(Icons.clear), onPressed: () {}),
  ],
)

第三章：State 管理三阶段

阶段一：setState（入门）

简单直接，适合表单、按钮状态等局部场景。缺点：状态分散，难以跨组件共享。

阶段二：InheritedWidget / Provider（进阶）

官方推荐的中型项目方案，依赖注入 + ChangeNotifier。

阶段三：Bloc / Riverpod / Redux（大型项目）

响应式、可测试、与 UI 解耦的状态管理。

第四章：常用 Widget 速查

类别	Widget
布局	Row, Column, Stack, Expanded, Flexible
容器	Container, Padding, Center, SizedBox, DecoratedBox
列表	ListView, GridView, SliverList
文本	Text, RichText, TextField
按钮	ElevatedButton, TextButton, IconButton, FloatingActionButton
导航	Navigator, BottomNavigationBar, TabBar
图片	Image.network, Image.asset, FadeInImage

第五章：网络请求与 JSON

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<User>> fetchUsers() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/users'),
  );
  if (response.statusCode == 200) {
    final List<dynamic> jsonList = jsonDecode(response.body);
    return jsonList.map((j) => User.fromJson(j)).toList();
  }
  throw Exception('请求失败');
}

思考题

1. Flutter 与 React Native 在渲染机制上的核心区别是什么？各有什么优劣？
2. StatefulWidget 的 createState() 为何在多次重建中只调用一次？
3. Widget、Element、RenderObject 三棵树的关系是什么？
4. Flutter 如何处理不同屏幕尺寸的适配？