前言

今天学习了Flutter的一些知识，写下自己的心得体会以作参考。希望每天进步。

                                         ——君子之学必日新，日新者日进也。不日新者必日退-程颐

一、开发环境

1.1 查看Flutter SDK版本

怎么下载，网上有很多教程这里不再演示。浏览器搜索“Flutter下载教程”即可。在开发前，大家需要搭建好鸿蒙Flutter的开发环境（注意：不能使用官方的Flutter SDK，官方的并未适配鸿蒙。要使用OpenHarmony社区适配的Flutter SDK）

输入"win+r"在输入框里面输入cmd

在cmd窗口里面输入"flutter --version"，可以看到我这里有两个版本的flutter sdk。因为我装了两个SDK，我们要用的是第一个SDK。

1.2 前期准备工作

1.2.1 Vscode插件

Vscode下载安装好以下插件：Dart、Flutter Widget Snippets、Flutter。然后重启vscode

1.2.2 Android插件

Android Studio下载安装好Dart、Flutter插件

1.3 创建Flutter-鸿蒙项目

我初次创建项目是使用Android Studio创建的，Vscode也可以创建Flutter项目。

（1）点击右上角"New Flutter Project"

（2）选择SDK

（3）起好自己的项目名：我这里起名："wan_Android"。因为我准备做玩安卓的项目。起名最好见名知意，然后选择好自己的路径，这里没有ohos的选项是正常的。因为需要创建好再进行创建鸿蒙的项目。

（4）先查看自己的Flutter sdk版本是不是OpenHarmony适配的版本，

然后再执行"flutter create --platform ohos ."

执行完毕后，可以看到左边多出了一个ohos的文件夹。

（5）使用DevEco Studio运行鸿蒙的项目

点击右上角绿色三角形即可运行成功

（6）如果打开项目有报错，就在"oh-package.json5"添加这行代码。（我发现DevEco Studio只要改一下Flutter的代码，经常会抽风报这个错）

"@ohos/flutter_ohos": "^1.0.0"

如果还是运行不了，就执行"flutter clean"和"flutter pub get"。

二、抽离组件

2.1 Flutter默认项目

Flutter默认创建出来的项目代码：效果是一个计时器，点击悬浮按钮的+号一直增加。

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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

2.2 抽离组件出来

在项目中一般需要抽离组件出来，为什么要抽离出来？

（1）代码复用性好，提高可维护性。

（2）单一职责原则，便于团队协作。

（3）提高可测试性，状态管理更加清晰。

main.dart代码：

import 'package:flutter/material.dart';
import 'package:wan_android/components/01.%E6%8A%BD%E7%A6%BB%E7%BB%84%E4%BB%B6.dart';


void main() {
  runApp(MaterialApp(
    home:MyApp1()
  ));
}

MyApp1代码：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //导航条
        appBar: AppBar(
          title: const Text('Flutter初体验',
              style: TextStyle(color: Colors.white, fontSize: 18)),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        //body一般放Container()
        body: const Center(
          child: Text('Hello World'),
        ));
  }
}

在vscode改动代码，在DevEco Studio运行即可。

2.3 未来规划

未来我打算学习到一定程度，开发一个Flutter“玩安卓”的项目。相信熟悉安卓开发的都知道这个项目，目前能力有限，打算一边学习一边做，尽量早日做出来完整的项目。

本文章到此结束，感谢大家观看。

三、结语

在整理这篇文章，我翻阅了一些资料。发现一个普遍现象：人的专注力是有限的。在浏览一篇文章的“黄金阅读时间”大概是3~5分钟。

所以我觉得文章内容尽可能精简、直击要点。如果大家觉得文章有任何表述不清、错误或者可以改进的地方，欢迎在评论区评论。

如果您在实践过程中遇到了问题，或者有更好的想法，也可以在评论区进行留言讨论，我们一起讨论，共同进步。

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