基础知识

约 1730 字大约 6 分钟

FlutterDart跨端

2026-04-08

Flutter 官方文档
Dart 语言官网

一、Flutter 概述

Flutter 是 Google 推出的开源 UI 工具包，使用 Dart 语言开发，通过一套代码同时构建 iOS、Android、Web、Windows、macOS、Linux 应用。与 React Native / WebView 方案不同，Flutter 直接通过 Skia / Impeller 自绘引擎渲染 UI，不依赖平台原生控件，因此在跨平台一致性和性能上具有显著优势。

架构分层

层级	说明
Framework（Dart）	Material / Cupertino / Widgets / Rendering / Animation / Painting / Gestures 等，全部用 Dart 编写
Engine（C++）	Skia / Impeller 绘制、Dart runtime、文字排版、平台通道
Embedder（平台原生）	负责对接各平台的事件循环、窗口、输入法等

Flutter 与其他跨端方案对比

方案	渲染方式	语言	性能	生态
Flutter	自绘（Skia/Impeller）	Dart	高	成熟
React Native	原生控件桥接（New Arch: JSI/Fabric）	JS/TS	中高	极成熟
uni-app / Taro	WebView / 小程序原生	Vue/React	中	国内丰富

二、Dart 语法速览

Dart 是强类型、面向对象的语言，语法接近 Java/TypeScript，支持 AOT 和 JIT 编译。

// 变量与类型推断
var name = 'ZhenYu';        // 类型推断为 String
final age = 18;             // 运行时常量
const pi = 3.14;            // 编译时常量
int? nullable;              // 可空类型（Null Safety）

// 函数
int add(int a, int b) => a + b;

// 命名参数
Widget build({required String title, Color? color}) { ... }

// 类与构造函数
class User {
  final String name;
  final int age;
  const User({required this.name, required this.age});

  // 命名构造函数
  User.guest() : name = 'guest', age = 0;
}

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

// 级联操作符 ..
final paint = Paint()
  ..color = Colors.red
  ..strokeWidth = 2.0;

Null Safety

Dart 2.12 起引入健全空安全：类型默认非空，? 表示可空，! 强制断言非空，late 延迟初始化。

三、环境搭建

安装 Flutter SDK：从官网下载或用 fvm 管理多版本
Android Studio / Xcode：安装对应 SDK 与模拟器
运行 flutter doctor：检查环境依赖
编辑器：推荐 VS Code + Flutter/Dart 插件

flutter create my_app
cd my_app
flutter run              # 启动到当前设备
flutter build apk        # 构建 Android
flutter build ios        # 构建 iOS
flutter build web        # 构建 Web

版本管理：fvm

dart pub global activate fvm
fvm install 3.24.0
fvm use 3.24.0
fvm flutter run

Flutter 的核心哲学是 Everything is a Widget。Widget 是不可变的 UI 描述，通过嵌套组合形成界面。Widget 本身不负责渲染，真正渲染由背后的 Element 与 RenderObject 三棵树协作完成。

树	角色	特性
Widget 树	配置描述	不可变，频繁创建
Element 树	上下文实例	持久化，管理生命周期
RenderObject 树	布局与绘制	持久化，处理 layout/paint/hitTest

StatelessWidget vs StatefulWidget

// 无状态组件
class Greeting extends StatelessWidget {
  final String name;
  const Greeting({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name');
  }
}

// 有状态组件
class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => setState(() => _count++),
      child: Text('Count: $_count'),
    );
  }
}

State 生命周期

createState → initState → didChangeDependencies → build → didUpdateWidget → deactivate → dispose。setState 触发重建，Flutter 通过 Element diff 与 key 复用来最小化 RenderObject 的重建。

五、常用组件

基础组件

Text / RichText：文本
Image.asset / Image.network：图片
Icon：Material/Cupertino 图标
Container：装饰盒子（padding/margin/decoration）
SizedBox：固定尺寸占位
GestureDetector / InkWell：手势与水波纹

Material 与 Cupertino

Flutter 同时内置 Material Design（Android 风格）和 Cupertino（iOS 风格）两套组件库：

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: const Text('Home')),
    body: const Center(child: Text('Content')),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: const Icon(Icons.add),
    ),
  ),
)

六、布局系统

Flutter 布局协议：父 Widget 向子 Widget 传递约束 (Constraints)，子 Widget 返回尺寸 (Size)，父 Widget 决定位置 (Position)。

线性布局

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Left'),
    Expanded(child: Text('Middle')),  // 弹性占满
    Text('Right'),
  ],
)

Row / Column：水平 / 垂直线性布局
Expanded / Flexible：按 flex 分配剩余空间
Stack + Positioned：绝对定位层叠
Wrap：自动换行流式布局
GridView：网格布局
ListView：可滚动列表，支持懒加载（ListView.builder）

Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => const DetailPage()),
);
Navigator.pop(context);

声明式路由（Navigator 2.0 / go_router）

推荐使用 go_router（官方维护），支持 URL、嵌套路由、深层链接和 Web 浏览器前进/后退：

final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (c, s) => const HomePage()),
    GoRoute(
      path: '/user/:id',
      builder: (c, s) => UserPage(id: s.pathParameters['id']!),
    ),
  ],
);

MaterialApp.router(routerConfig: router);

八、动画

Flutter 动画分 隐式动画 与 显式动画：

隐式动画

只需把属性改成目标值，Flutter 自动过渡：

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: expanded ? 200 : 100,
  color: expanded ? Colors.blue : Colors.red,
)

常见：AnimatedOpacity、AnimatedPadding、AnimatedPositioned、AnimatedSwitcher、Hero（共享元素过渡）。

显式动画

通过 AnimationController + Tween 精细控制：

class _FadeState extends State<Fade> with SingleTickerProviderStateMixin {
  late final AnimationController _ctrl = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  )..repeat(reverse: true);

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _ctrl,
      child: const FlutterLogo(size: 100),
    );
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }
}

九、状态管理

官方与社区提供多种方案，根据项目规模选择：

方案	特点	适用
`setState`	最简单，局部状态	小组件
`InheritedWidget`	跨层级传递	框架底层机制
`Provider`	基于 InheritedWidget	中小项目
`Riverpod`	Provider 升级版，编译期安全	推荐，中大型
`Bloc`	事件驱动 + Stream	大型复杂业务
`GetX`	简洁但侵入性强	快速开发

Riverpod 示例

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

class CounterPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return ElevatedButton(
      onPressed: () => ref.read(counterProvider.notifier).state++,
      child: Text('$count'),
    );
  }
}

十、网络与数据

http / dio：HTTP 请求，dio 支持拦截器、取消、进度
json_serializable + freezed：代码生成实现 JSON 序列化与不可变模型
shared_preferences：轻量键值存储
drift / sqflite：本地数据库
hive：高性能 NoSQL 存储

final dio = Dio();
final resp = await dio.get('https://api.example.com/users');
final users = (resp.data as List).map(User.fromJson).toList();

十一、平台通道

与原生代码（Kotlin/Swift）交互通过 Platform Channel：

const channel = MethodChannel('com.example/battery');
final level = await channel.invokeMethod<int>('getBatteryLevel');

新架构推荐使用 Pigeon（类型安全）或 FFI（直接调用 C/C++ 库）。

十二、性能优化要点

const 构造：尽可能使用 const Widget，避免重建
拆分 Widget：将频繁变化的部分隔离在小 Widget 内，缩小 setState 范围
避免 build 中重计算：耗时逻辑放到 initState 或外部
列表优化：长列表用 ListView.builder 而非 ListView(children: [...])
图片优化：设置 cacheWidth / cacheHeight，使用 cached_network_image
RepaintBoundary：隔离频繁重绘区域
DevTools：使用官方 flutter devtools 分析 performance、memory、widget tree

十三、项目实战要点

一个典型的 Flutter 项目目录：

my_app/
├── lib/
│   ├── main.dart
│   ├── app.dart
│   ├── core/          # 常量、主题、工具
│   ├── data/          # 数据源、模型、仓库
│   ├── features/      # 按业务模块划分
│   │   ├── home/
│   │   └── user/
│   └── shared/        # 通用组件
├── assets/
├── test/
└── pubspec.yaml       # 依赖声明

建议实践：

分层清晰：data → domain → presentation
依赖注入：使用 get_it 或 Riverpod
主题与国际化：ThemeData + flutter_localizations + intl
错误上报：集成 Sentry / Firebase Crashlytics
CI/CD：Codemagic / GitHub Actions + Fastlane

javascript

typescript

Flutter

React Native

Taro

uni-app

webpack

vite

rspack

脚本世界

规范先行

代码风格

ESLint

代码质量

工程设计

效率工具

持续集成与部署

运维与基础设施

Monorepo

核心基础

路由与状态

渲染与框架

实践与优化

基础知识