Flutter

约 892 字大约 3 分钟

2026-02-04

核心概念

Flutter 是 Google 开发的跨平台 UI 框架，使用 Dart 语言，可构建高性能的移动、Web 和桌面应用。

核心特性

Flutter 中一切都是 Widget：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: Center(
          child: Text('Hello Flutter!'),
        ),
      ),
    );
  }
}

StatelessWidget (无状态)

class Greeting extends StatelessWidget {
  final String name;
  
  const Greeting({required this.name});
  
  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name!');
  }
}

StatefulWidget (有状态)

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

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

State 管理

1. setState (内置)

setState(() {
  _count++;
});

2. Provider (推荐)

class CounterModel with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

// 使用
Consumer<CounterModel>(
  builder: (context, counter, child) {
    return Text('${counter.count}');
  },
)

3. Riverpod

final counterProvider = StateProvider((ref) => 0);

// 使用
Consumer(
  builder: (context, ref, child) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  },
)

4. BLoC (Business Logic Component)

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<IncrementEvent>((event, emit) => emit(state + 1));
  }
}

// 使用
BlocBuilder<CounterBloc, int>(
  builder: (context, count) {
    return Text('$count');
  },
)

布局系统

// Column (垂直)
Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)

// Row (水平)
Row(
  children: [
    Icon(Icons.star),
    Text('Rating'),
  ],
)

// Stack (层叠)
Stack(
  children: [
    Image.asset('background.jpg'),
    Positioned(
      top: 10,
      left: 10,
      child: Text('Overlay'),
    ),
  ],
)

// ListView (列表)
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

2. Flex 布局

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
)

渲染原理

1. 三棵树

Widget Tree：配置信息（不可变）
Element Tree：Widget 实例化（可变）
RenderObject Tree：实际渲染（布局、绘制）

2. 渲染流程

Widget → Element → RenderObject → Layer → Scene

3. BuildContext

// BuildContext 是 Element 的抽象
Theme.of(context)  // 从树中查找
MediaQuery.of(context)
Navigator.of(context)

性能优化

1. const 构造函数

// 避免重新构建
const Text('Hello');
const Icon(Icons.star);

2. ListView.builder

// 懒加载，只构建可见项
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

3. RepaintBoundary

// 隔离重绘区域
RepaintBoundary(
  child: AnimatedWidget(),
)

4. 避免过度构建

// 好 - 只重建需要的部分
Consumer<Model>(
  builder: (context, model, child) {
    return Text(model.data);
  },
)

// 差 - 整个树重建
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

Platform Channel

调用原生代码

static const platform = MethodChannel('com.example.app/channel');

Future<void> getBatteryLevel() async {
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    print('Battery level: $result%');
  } catch (e) {
    print('Error: $e');
  }
}

Flutter vs 其他框架

特性	Flutter	React Native	Native
语言	Dart	JavaScript	Kotlin/Swift
性能	高（原生渲染）	中（桥接）	最高
热重载	是	是	否
UI 一致性	完全一致	平台差异	平台原生
包大小	较大	中等	最小
学习曲线	中等	平缓	陡峭

优缺点

优点：

高性能：自绘引擎，接近原生
热重载：快速开发迭代
跨平台：一套代码多端运行
UI 一致性：所有平台表现一致
丰富的 Widget：Material + Cupertino

缺点：

包体积大：包含引擎（~4MB）
Dart 生态：相对较小
原生功能：需 Platform Channel
调试困难：三层树结构复杂

适用场景

✅ 适合：

跨平台移动应用
高性能 UI 应用
快速 MVP 开发
统一设计语言的应用

❌ 不适合：

重度依赖原生功能
包体积敏感的应用
需要大量原生交互
团队不熟悉 Dart

常见面试问题

Flutter 的渲染原理？三棵树是什么？
StatelessWidget 和 StatefulWidget 的区别？
setState 的工作原理？
Flutter 如何实现热重载？
常用的 State 管理方案？
Flutter 的性能优化方法？
BuildContext 是什么？
Flutter 和 React Native 的区别？
如何与原生代码交互？
InheritedWidget 的作用？

Java

MySQL

Flutter