↓ 跳过正文
推开数智的门
  1. 文章/

Flutter 完全指南：Google 跨平台 UI 框架

·607 字·3 分钟
sun.ao
技术分享 Flutter Dart 跨平台 移动开发 UI
sun.ao
作者
sun.ao
我是 sun.ao，一名热爱技术的程序员，专注于 AI 和数智化领域。
目录

当 React Native 在跨平台领域风生水起时，Google 推出了 Flutter—— 一个完全不同的解决方案。它不依赖原生组件，而是用自己的渲染引擎绘制 UI。

Flutter 是什么？
#

Flutter 是 Google 于 2017 年发布的跨平台 UI 框架，2018 年发布 1.0 正式版。它的核心特点是：使用 Dart 语言，通过自研渲染引擎实现原生级别的性能。

类比理解
#

对比项React NativeFlutter
渲染方式调用原生组件自研渲染引擎
语言JavaScript/TypeScriptDart
性能依赖原生接近原生
控件原生控件自绘控件
就像翻译官画家

React Native 是"翻译官"—— 把 JavaScript 翻译成原生组件。 Flutter 是"画家"—— 自己画 UI，不依赖翻译。

核心特性
#

1. 自研渲染引擎：Skia
#

Flutter 使用 Skia 图形库自绘 UI，这意味着：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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!'),
        ),
      ),
    );
  }
}

所有 UI 都是 Flutter 自己画的，不依赖 iOS 的 UIKit 或 Android 的 View 系统。

2. Widget：一切皆组件
#

在 Flutter 中，所有 UI 都是 Widget：

// 基础 Widget
Text('Hello')  // 文本
Icon(Icons.star)  // 图标
Image.network('url')  // 图片
ElevatedButton(onPressed: () {}, child: Text('点击'))  // 按钮

// 布局 Widget
Column(children: [...])  // 垂直排列
Row(children: [...])  // 水平排列
Stack(children: [...])  // 堆叠
Container()  // 容器

// 复杂 Widget
ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

3. 热重载：开发体验极佳
#

Flutter 的热重载（Hot Reload）非常强大：

  • 保存代码后，UI 瞬间更新
  • 状态保持不变
  • 非常适合 UI 开发

4. 声明式 UI：类似 React
#

Flutter 使用声明式 UI 范式：

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(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('计数: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('增加'),
        ),
      ],
    );
  }
}

5. 丰富的组件库
#

Flutter 提供了丰富的 Material Design 和 Cupertino 组件：

// Material Design 组件
Scaffold(
  appBar: AppBar(title: Text('标题')),
  drawer: Drawer(child: ...),
  floatingActionButton: FloatingActionButton(...),
)

// iOS 风格组件
CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(...),
)

6. 状态管理：多种方案
#

Flutter 有多种状态管理方案：

方案适用场景复杂度
setState简单页面低
Provider中小型应用中
Riverpod中大型应用中
Bloc复杂应用高
GetX快速开发低
// Provider 示例
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

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

为什么 Flutter 如此流行？
#

1. 真正的跨平台
#

一套代码，运行在：

  • iOS
  • Android
  • Web
  • Windows
  • macOS
  • Linux

2. 性能接近原生
#

因为使用自研渲染引擎，不依赖原生组件：

  • 60fps 流畅运行
  • 没有 JavaScript 桥接开销
  • 直接编译为原生代码

3. 漂亮的 UI
#

Flutter 的 Material Design 实现非常完善：

  • 丰富的动画
  • 流畅的过渡
  • 高度可定制

4. 开发效率高
#

  • 热重载快
  • 单一语言（Dart）
  • 丰富的组件库

适用场景
#

场景适合程度说明
跨平台 App⭐⭐⭐⭐⭐核心场景
快速原型⭐⭐⭐⭐⭐开发效率高
MVP 产品⭐⭐⭐⭐⭐快速验证
复杂动画⭐⭐⭐⭐⭐自研渲染引擎
企业级应用⭐⭐⭐⭐逐渐成熟
游戏⭐⭐⭐有专门的游戏引擎

学习路线建议
#

入门阶段（2 周）
#

  1. 掌握 Dart 基础语法
  2. 理解 Flutter Widget 系统
  3. 学会常用布局
  4. 掌握状态管理基础

进阶阶段（2-3 周）
#

  1. 深入布局原理
  2. 掌握 Provider/Riverpod
  3. 学会网络请求
  4. 掌握动画

高级阶段（持续学习）
#

  1. 平台通道（Platform Channel）
  2. 性能优化
  3. 打包和发布
  4. 深入渲染原理

Flutter 与其他框架对比
#

特性FlutterReact NativeSwiftUIKotlin Multiplatform
语言DartJS/TSSwiftKotlin
渲染自研引擎原生组件原生原生
性能⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
跨平台⭐⭐⭐⭐⭐⭐⭐⭐⭐仅 Apple⭐⭐⭐⭐
UI 一致性⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

简单来说：

  • Flutter：UI 一致性最好，跨平台最全
  • React Native：前端开发者友好
  • SwiftUI：iOS 原生体验
  • Kotlin Multiplatform：共享业务逻辑

Dart 语言基础
#

// 变量
var name = 'Tom';
String name = 'Tom';
int age = 25;
double height = 1.75;
bool isStudent = true;

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

// 类
class Person {
  String name;
  int age;

  Person(this.name, this.age);

  void greet() => print('Hello, I am $name');
}

// 异步
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'Data';
}

常用命令
#

# 安装 Flutter
git clone https://github.com/flutter/flutter.git

# 创建项目
flutter create my_app

# 运行
flutter run

# 构建 APK
flutter build apk

# 构建 iOS
flutter build ios

# 构建 Web
flutter build web

总结
#

Flutter 为跨平台开发提供了全新的思路：

  1. 自研渲染引擎—— 性能接近原生
  2. Widget 系统—— 一切皆组件
  3. Dart 语言—— 简洁高效
  4. 热重载—— 开发体验极佳
  5. 真正跨平台—— 一套代码，多端运行

如果你需要开发跨平台应用，特别是对 UI 一致性有要求，Flutter 是最佳选择。

下期预告：Flutter 是"自己画 UI"，而 React Native 则是"调用原生组件"。作为前端开发者最熟悉的跨平台方案，React Native 有怎样的魅力？最后一篇文章我们来详细介绍。

相关文章