Flutter 入门实战：用代码构建你的第一个跨平台应用

在移动开发领域，效率与一致性是开发者永恒的追求。Google 推出的 Flutter 正是为此而生——它不仅支持一套代码运行在 iOS、Android、Web 和桌面端，还提供了接近原生的性能和丰富的 UI 组件。本文将带你快速了解 Flutter 的核心特性，并通过一个完整的代码示例，构建一个简单的“计数器”应用，真正实现“边学边做”。

---

一、什么是 Flutter？

Flutter 是一个开源的 UI 工具包，使用 Dart 语言 开发，由 Google 维护。它通过自研的 Skia 图形引擎直接绘制界面，不依赖平台原生控件，因此能够实现高性能、高保真的跨平台体验。

主要优势：

• 高性能（AOT 编译）
• 热重载（Hot Reload）提升开发效率
• 丰富可定制的 Widget 系统
• 支持多平台：移动端、Web、桌面

---

二、环境准备

在开始编码前，请确保已安装以下工具：

1. 安装 Flutter SDK
2. 配置 Android Studio 或 VS Code（推荐安装 Flutter 和 Dart 插件）
3. 运行 flutter doctor 检查环境是否就绪

完成后，执行以下命令创建新项目：

flutter create my_first_flutter_app
cd my_first_flutter_app

---

三、编写第一个 Flutter 应用：计数器 Counter

我们将修改默认生成的 main.dart 文件，实现一个点击按钮增加数字的简单应用。

✅ 完整代码如下：

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 计数器 Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true, // 使用 Material Design 3
      ),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0; // 记录当前计数值

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter 计数器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你点击了下面按钮多少次？',
              style: TextStyle(fontSize: 16),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

---

四、代码解析

让我们逐段理解这段代码的关键部分：

1. 入口函数 main

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

这是 Dart 程序的入口，runApp() 将 MyApp 设置为根组件。

2. 根组件 MyApp（无状态组件）

class MyApp extends StatelessWidget { ... }

这是一个无状态组件，用于配置整个应用的主题和首页。

3. 页面组件 CounterPage（有状态组件）

class CounterPage extends StatefulWidget { ... }

因为需要响应用户操作并更新数据，所以使用 StatefulWidget。

4. 状态管理 _CounterPageState

int _counter = 0;

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

• _counter 存储当前计数值。
• 每次点击按钮调用 _incrementCounter()，并通过 setState() 通知框架重新构建 UI。

5. 布局结构说明

组件	作用
Scaffold	提供标准 Material Design 布局结构（包含 AppBar、Body、FloatingActionButton）
Center + Column	居中显示内容，垂直排列文本
Text	显示静态和动态文本
FloatingActionButton	悬浮按钮，绑定点击事件

---

五、运行项目

在项目根目录下运行以下命令即可启动应用：

# 启动到连接的设备或模拟器
flutter run

# 启动到 Chrome 浏览器（Web 版）
flutter run -d chrome

# 启动到 macOS 桌面端
flutter run -d macos

你将看到如下界面：

+----------------------------+
|     Flutter 计数器         |
|                            |
|   你点击了下面按钮多少次？ |
|           0                |
|                            |
|           [+]              |
+----------------------------+

每点击一次 [+] 按钮，数字就会加 1！

---

六、扩展建议：添加重置功能

我们可以进一步改进这个应用，比如添加一个“重置”按钮。

修改点：在 FloatingActionButton 外层包裹 Row

floatingActionButton: Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton(
      onPressed: _incrementCounter,
      child: const Icon(Icons.add),
      heroTag: "add_btn",
    ),
    const SizedBox(width: 10),
    FloatingActionButton(
      onPressed: () {
        setState(() {
          _counter = 0;
        });
      },
      child: const Icon(Icons.refresh),
      heroTag: "reset_btn",
    ),
  ],
),

现在你可以增加和重置计数了！

---

七、总结

通过这个简单的例子，我们已经掌握了 Flutter 开发的核心流程：

• 使用 Widget 构建 UI
• 利用 StatefulWidget 管理状态
• 通过 setState() 触发界面更新
• 快速预览效果（热重载）

Flutter 的强大之处在于其灵活性与一致性。无论是构建复杂的企业级 App，还是轻量级工具，它都能胜任。

---

八、下一步学习建议

1. 学习更多内置 Widget：ListView, GridView, TextField, Form 等
2. 掌握状态管理方案：Provider, Riverpod, Bloc
3. 接入网络请求：使用 http 包获取 API 数据
4. 发布应用：学习如何打包 APK/IPA 或部署 Web 版本

---

参考资源

• 官方网站：https://flutter.dev
• 中文文档：https://flutter.cn
• Pub 包管理：https://pub.dev
• 示例项目：GitHub - flutter/samples

---

“代码即设计，一次编写，随处运行。”
—— 这就是 Flutter 的魅力所在。

现在就开始你的 Flutter 之旅吧！只需几行代码，你就能创造出令人惊艳的跨平台应用欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。。