【OpenHarmony】跨平台开发-Flutter 初阶学习：项目组件创建与页面创建
- 通过 cmd 创建 项目，这里注意创建项目时不要用大写，全小写即可！
-
通过VScode 打开项目
2.1 下载相关插件即可运行调试项目，这样做的好处就是可以选择编译平台，可以在Windows 浏览器 ios Android DevEco
-
在浏览器预览 flutter 项目
3.1通过命令
flutter run -d chrome # 优先用浏览器跑，也可以用模拟器/真机
3.2 这样做的目的地就是不用在 DevEco 进行编译运行，这样的话编译速度快、看到项目内容结果方便，因为 DevEco 的 index.ets 代码仅仅是在显示 flutter 而已，所以类比下先在浏览器更加看到项目结果！
-
flutter官网教程：Dart 入门
4.1 学习笔记：
1. 要开始使用 Flutter，你需要对 Dart 编程语言有所了解，因为 Flutter 应用程序就是用 Dart 编写的。2. Flutter 应用程序是用 [Dart](https://dart.cn/) 编写的，对于曾经写过 Java、Javascript 或其他类似 C 风格语言的人来说，这种语言应该很熟悉。3.**初始化的代码应该放在哪？**Flutter 应用的主入口点是在 `lib/main.dart` 中。默认的 `main` 方法如下所示
4. 在开始使用 Flutter 之前，你需要对 Dart 编程语言以及 Widget 有所了解，因为 Dart 是 Flutter 应用的开发语言，而 Widget 则是 Flutter UI 的基本构成要素。5. 关于 Flutter，你总是会听到「万物皆 Widget (everything is a widget)」的说法。 Widget 是 Flutter 应用程序用户界面的基本构成要素，每个 Widget 都是对 用户界面特定部分的不可变 (immutable) 声明。它们用于描述用户界面的各个维度，包括物理外观（诸如文本和按钮）和布局效果（诸如填充和对齐）。6. **Widget 通过组合机制形成层级结构。每个 Widget 都嵌套于父 Widget 内，并且能够从父级接收上下文信息**。
-
项目运行结果
5.1 代码讲解
import 'package:flutter/material.dart';void main() => runApp(const MyApp());/* ---------------- 入口 ---------------- */
class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: '两页互动小例子',debugShowCheckedModeBanner: false,theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),home: const HomePage(), // 首页);}
}/* ---------------- 首页 ---------------- */
class HomePage extends StatefulWidget {const HomePage({super.key});@overrideState<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {int _value = 50; // 要共享的数据@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('首页')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('当前值：$_value', style: const TextStyle(fontSize: 32)),const SizedBox(height: 20),ElevatedButton.icon(icon: const Icon(Icons.arrow_forward),label: const Text('去改数字'),onPressed: () async {// 异步等待第二页返回final result = await Navigator.of(context).push<int>(MaterialPageRoute(builder: (_) => SettingPage(initialValue: _value),),);// 如果用户按了返回键，result 就是 nullif (result != null) {setState(() => _value = result);}},),],),),);}
}/* ---------------- 设置页 ---------------- */
class SettingPage extends StatefulWidget {final int initialValue;const SettingPage({super.key, required this.initialValue});@overrideState<SettingPage> createState() => _SettingPageState();
}class _SettingPageState extends State<SettingPage> {late int _current; // 当前滑块值@overridevoid initState() {super.initState();_current = widget.initialValue; // 把首页带来的值作为初始}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('设置页'),leading: BackButton(onPressed: () => Navigator.of(context).pop(_current), // 把值带回去),),body: Center(child: SizedBox(width: 300,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('$_current', style: const TextStyle(fontSize: 48)),const SizedBox(height: 20),Slider(value: _current.toDouble(),min: 0,max: 100,divisions: 100,label: '$_current',onChanged: (v) => setState(() => _current = v.round()),),const SizedBox(height: 20),ElevatedButton(child: const Text('保存并返回'),onPressed: () => Navigator.of(context).pop(_current),),],),),),);}
}5.2 浏览器运行结果
5.3 DevEco 运行结果
通过本文你知道了flutter 的：创建项目、语法结构、编译选择、例子练习！本文是初阶教程，后面陆续会出文章面向 Open Harmony，实现跨平台案例分享，内容为从低到高，希望可以帮助到大家！