Flutter 核心架构

架构分层

┌─────────────────────────────────────────────────────┐
│                   Framework (Dart)                   │
│  ┌─────────────────────────────────────────────────┐│
│  │  Material / Cupertino (UI 组件库)               ││
│  ├─────────────────────────────────────────────────┤│
│  │  Widgets (组合式 UI)                            ││
│  ├─────────────────────────────────────────────────┤│
│  │  Rendering (布局、绘制)                         ││
│  ├─────────────────────────────────────────────────┤│
│  │  Foundation (基础库)                            ││
│  └─────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────┤
│                   Engine (C++)                       │
│  Skia (渲染) | Dart VM | Platform Channels         │
├─────────────────────────────────────────────────────┤
│                   Embedder                          │
│  iOS (UIKit) | Android (JNI) | Web | Desktop       │
└─────────────────────────────────────────────────────┘

Widget 系统

Widget 三棵树

// 1. Widget Tree - 配置描述（不可变）
// 2. Element Tree - 实例管理（生命周期）
// 3. RenderObject Tree - 布局绘制

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 返回 Widget 配置
    return Container(
      child: Text('Hello'),
    );
  }
}

Widget Tree          Element Tree         RenderObject Tree
┌──────────┐        ┌──────────┐         ┌──────────────┐
│ Container│───────▶│ Element  │────────▶│ RenderBox    │
└────┬─────┘        └────┬─────┘         └──────────────┘
     │                   │
┌────▼─────┐        ┌────▼─────┐         ┌──────────────┐
│  Text    │───────▶│ Element  │────────▶│RenderParagraph│
└──────────┘        └──────────┘         └──────────────┘

StatelessWidget vs StatefulWidget

// 无状态组件
class GreetingWidget extends StatelessWidget {
  final String name;
  
  const GreetingWidget({required this.name});
  
  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name');
  }
}

// 有状态组件
class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterState();
}

class _CounterState extends State<CounterWidget> {
  int _count = 0;
  
  void _increment() {
    setState(() {
      _count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

生命周期

class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyState();
}

class _MyState extends State<MyStatefulWidget> {
  @override
  void initState() {
    super.initState();
    // 初始化，只调用一次
  }
  
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 依赖变化（InheritedWidget）
  }
  
  @override
  void didUpdateWidget(MyStatefulWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // Widget 配置更新
  }
  
  @override
  void dispose() {
    // 释放资源
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

渲染机制

渲染流水线

┌────────────┐   ┌────────────┐   ┌────────────┐   ┌────────────┐
│   Build    │──▶│   Layout   │──▶│   Paint    │──▶│ Composite  │
│ Widget树   │   │ 计算尺寸   │   │ 绘制命令   │   │ GPU 合成   │
└────────────┘   └────────────┘   └────────────┘   └────────────┘

布局约束

// 约束传递：父 -> 子
// 尺寸返回：子 -> 父

Container(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 50,
    maxHeight: 100,
  ),
  child: FlexibleChild(),
)

Platform Channels

// Dart 端
import 'package:flutter/services.dart';

class BatteryChannel {
  static const platform = MethodChannel('com.example/battery');
  
  Future<int> getBatteryLevel() async {
    try {
      final int level = await platform.invokeMethod('getBatteryLevel');
      return level;
    } on PlatformException catch (e) {
      return -1;
    }
  }
}

// Android 端 (Kotlin)
class MainActivity: FlutterActivity() {
  override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    
    MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "com.example/battery")
      .setMethodCallHandler { call, result ->
        if (call.method == "getBatteryLevel") {
          val batteryLevel = getBatteryLevel()
          result.success(batteryLevel)
        } else {
          result.notImplemented()
        }
      }
  }
}

Dart 语言特性

// 空安全
String? nullableString;
String nonNullString = nullableString ?? 'default';

// 异步
Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com'));
  // ...
}

// 扩展方法
extension StringExtension on String {
  String capitalize() => '${this[0].toUpperCase()}${substring(1)}';
}

// 记录类型 (Dart 3)
(String, int) getNameAndAge() => ('Alice', 30);

// 模式匹配 (Dart 3)
switch (shape) {
  case Circle(radius: var r): print('Circle with radius $r');
  case Rectangle(width: var w, height: var h): print('Rectangle $w x $h');
}

面试要点

1. 三棵树：Widget/Element/RenderObject 职责
2. 渲染流程：Build -> Layout -> Paint -> Composite
3. 状态管理：StatelessWidget vs StatefulWidget
4. 原生通信：Platform Channels 机制