跨平台开发实战：Flutter基础入门 + 常用三方库实战 + 鸿蒙原生开发全流程指南

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

前言

本教程专为零基础入门跨平台与原生开发的学习者打造，全程提供可直接复刻的详细步骤，覆盖Flutter环境搭建、核心组件使用、主流三方库集成实战，以及鸿蒙（HarmonyOS）原生开发从0到1的项目创建、页面编写、功能实现。所有步骤经过实测，跟着操作即可完成全部项目实践，适合自学、实训、入门参考。

一、教程核心内容与环境准备

1.1 核心学习目标

• 掌握Flutter开发环境搭建，能独立创建Flutter项目

• 学会Flutter基础组件使用，完成简单页面开发

• 熟练集成5个Flutter高频三方库，实现实用功能

• 掌握鸿蒙开发环境配置，完成鸿蒙原生项目创建与基础页面编写

1.2 必备开发工具

工具名称	用途	下载地址
Flutter SDK	Flutter开发核心工具	https://flutter.dev/docs/get-started/install
DevEco Studio	鸿蒙官方开发IDE	https://developer.harmonyos.com/cn/develop/deveco-studio
Android Studio（可选）	Flutter辅助开发IDE	https://developer.android.com/studio
VS Code（推荐）	轻量级代码编辑器	https://code.visualstudio.com/

1.3 环境检查前提

• 电脑系统：Windows 10+/macOS 10.15+/Linux（推荐Windows/macOS）

• 内存≥8GB，硬盘剩余空间≥20GB

• 已安装Git（用于拉取代码）

二、Flutter零基础入门（详细步骤）

2.1 Flutter环境搭建（Windows系统，全程步骤）

步骤1：下载Flutter SDK

1. 打开Flutter官网下载页，选择Windows版本，下载最新稳定版SDK（zip压缩包）

2. 将压缩包解压到非中文、无空格的路径（例如：D:\Flutter）

步骤2：配置系统环境变量

1. 右键「此电脑」→「属性」→「高级系统设置」→「环境变量」

2. 在「系统变量」中找到Path，双击编辑

3. 点击「新建」，添加Flutter SDK的bin目录路径：D:\Flutter\bin

4. 点击确定，保存配置

步骤3：检查环境配置

1. 打开命令提示符（CMD），输入命令：

flutter --version

1. 若显示Flutter版本信息，说明SDK配置成功

2. 执行依赖检查命令：

flutter doctor

1. 根据提示安装缺失的依赖（如Android Studio、Chrome、设备驱动等）

2.2 创建第一个Flutter项目

步骤1：初始化项目

1. 在CMD中进入项目存放目录（例如：D:\FlutterProjects）

2. 执行创建命令：

flutter create flutter_demo

1. 等待项目创建完成，会生成完整的Flutter模板项目

步骤2：运行项目

1. 进入项目目录：

cd flutter_demo

1. 连接安卓手机/开启安卓模拟器，执行运行命令：

flutter run

1. 等待编译完成，手机/模拟器会显示Flutter默认计数器页面

2.3 Flutter核心基础组件实战

修改项目lib/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入门实战',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

// 首页组件
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0; // 计数器变量

  // 点击累加方法
  void _incrementCount() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter基础页面')), // 导航栏
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('你点击了多少次：', style: TextStyle(fontSize: 20)),
            Text('$_count', style: const TextStyle(fontSize: 30, color: Colors.blue)),
            const SizedBox(height: 20), // 间距组件
            ElevatedButton(
              onPressed: _incrementCount,
              child: const Text('点击累加'),
            )
          ],
        ),
      ),
    );
  }
}

核心组件说明

• MaterialApp：Flutter应用根组件，提供主题、路由等基础能力

• Scaffold：页面骨架组件，包含导航栏、主体、底部栏等

• Text：文本显示组件

• ElevatedButton：按钮组件

• setState：更新页面状态，刷新UI

三、Flutter常用三方库集成实战（5个高频库）

Flutter三方库是提升开发效率的核心，本章节集成网络请求、本地存储、图片加载、弹窗、下拉刷新5个最常用库，步骤可直接复制操作。

3.1 三方库通用集成步骤

1. 打开项目pubspec.yaml文件

2. 在dependencies节点下添加库名称与版本

3. 执行命令安装依赖：flutter pub get

4. 在dart文件中导入库，调用API实现功能

3.2 实战1：网络请求库（dio）

步骤1：添加依赖

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.4.0 # 网络请求三方库

步骤2：使用dio发送请求

import 'package:dio/dio.dart';

// 定义网络请求方法
Future<void> getHttpData() async {
  try {
    Response response = await Dio().get('https://api.github.com');
    print('请求结果：${response.data}');
  } catch (e) {
    print('请求失败：$e');
  }
}

3.3 实战2：本地存储库（shared_preferences）

步骤1：添加依赖

shared_preferences: ^2.2.2

步骤2：存储/读取数据

import 'package:shared_preferences/shared_preferences.dart';

// 存储数据
Future<void> saveData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('username', 'flutter_user');
}

// 读取数据
Future<String?> getData() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('username');
}

3.4 实战3：图片加载库（cached_network_image）

步骤1：添加依赖

cached_network_image: ^3.3.1

步骤2：加载网络图片（支持缓存）

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://picsum.photos/200',
  placeholder: (context, url) => const CircularProgressIndicator(), // 加载占位
  errorWidget: (context, url, error) => const Icon(Icons.error), // 错误占位
)

3.5 实战4：全局弹窗库（fluttertoast）

步骤1：添加依赖

fluttertoast: ^8.2.2

步骤2：显示轻量提示弹窗

import 'package:fluttertoast/fluttertoast.dart';

// 调用弹窗
Fluttertoast.showToast(
  msg: "操作成功",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.CENTER,
  timeInSecForIosWeb: 1,
  backgroundColor: Colors.blue,
  textColor: Colors.white,
);

3.6 实战5：下拉刷新/上拉加载（pull_to_refresh）

步骤1：添加依赖

pull_to_refresh: ^2.0.0

步骤2：实现刷新功能

import 'package:pull_to_refresh/pull_to_refresh.dart';

RefreshController _refreshController = RefreshController();

SmartRefresher(
  controller: _refreshController,
  onRefresh: () async {
    // 下拉刷新逻辑
    await Future.delayed(const Duration(seconds: 1));
    _refreshController.refreshCompleted();
  },
  onLoading: () async {
    // 上拉加载逻辑
    await Future.delayed(const Duration(seconds: 1));
    _refreshController.loadComplete();
  },
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (c, i) => ListTile(title: Text('列表项 $i')),
  ),
)

四、鸿蒙（HarmonyOS）原生开发入门

4.1 鸿蒙开发环境搭建

步骤1：安装DevEco Studio

1. 下载鸿蒙官方IDE（DevEco Studio）

2. 双击安装包，一路默认安装，勾选OpenHarmony SDK

3. 启动IDE，按照提示下载SDK与工具链

步骤2：配置开发环境

1. 打开IDE → 点击「Tools」→「OpenHarmony SDK Manager」

2. 安装对应版本的SDK（推荐API 10及以上）

3. 配置模拟器/真机调试：

   • 模拟器：IDE内点击「Device Manager」→创建手机模拟器

   • 真机：开启鸿蒙手机「开发者模式」→允许USB调试

4.2 创建第一个鸿蒙项目

步骤1：初始化项目

1. 打开DevEco Studio → 「Create Project」

2. 选择「Empty Ability」→ 点击Next

3. 配置项目信息：

   • Project Name：harmony_demo

   • Package Name：com.example.harmonydemo

   • Save Location：项目存放路径

4. 点击Finish，等待项目构建完成

4.3 鸿蒙基础页面编写（ArkTS语言）

鸿蒙使用ArkTS作为开发语言，修改entry/src/main/ets/pages/Index.ets文件：

@Entry // 入口页面
@Component // 组件标识
struct Index {
  @State count: number = 0; // 响应式变量

  build() {
    Column() { // 垂直布局
      Text('鸿蒙入门实战')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 });

      Text(`点击次数：${this.count}`)
        .fontSize(25)
        .fontColor(Color.Blue);

      Button('点击累加')
        .width(150)
        .height(50)
        .fontSize(18)
        .onClick(() => { // 点击事件
          this.count++;
        })
        .margin({ top: 20 });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center); // 居中对齐
  }
}

4.4 运行鸿蒙项目

1. 启动模拟器/连接真机

2. 点击IDE右上角「运行」按钮（绿色三角）

3. 等待编译完成，模拟器/手机显示鸿蒙页面，点击按钮可实现累加功能

五、项目总结与拓展学习

5.1 本教程完成的实践内容

• ✅ Flutter环境搭建+项目创建+基础组件

• ✅ 5个Flutter高频三方库集成与实战

• ✅ 鸿蒙开发环境搭建+项目创建+ArkTS页面编写

• ✅ 双平台项目运行与调试

5.2 拓展学习方向

• Flutter：路由管理、状态管理（Provider/Bloc）、打包发布

• 三方库：集成视频播放、地图、扫码、权限管理等专业库

• 鸿蒙：组件化开发、数据存储、网络请求、跨设备适配

总结

本教程全程步骤化、可实操、零门槛，覆盖Flutter入门、三方库实战、鸿蒙开发三大核心内容，所有代码与命令均可直接复制使用。通过本教程，你可以快速掌握跨平台与鸿蒙原生开发的基础能力，为后续进阶学习打下坚实基础。

核心要点回顾

• Flutter三方库统一通过pubspec.yaml配置，flutter pub get安装

• Flutter核心是组件化+响应式状态，所有UI都是组件

• 鸿蒙开发使用DevEco Studio，基于ArkTS语言编写页面

• 实操是入门关键，跟着步骤完成所有项目即可掌握基础