【OpenHarmony】跨平台开发-Flutter 初阶学习：项目组件创建与页面创建

【OpenHarmony】跨平台开发-Flutter 初阶学习：项目组件创建与页面创建

1. 通过 cmd 创建 项目，这里注意创建项目时不要用大写，全小写即可！

2. 通过VScode 打开项目

   2.1 下载相关插件即可运行调试项目，这样做的好处就是可以选择编译平台，可以在Windows 浏览器 ios Android DevEco

3. 在浏览器预览 flutter 项目

   3.1通过命令

   flutter run -d chrome # 优先用浏览器跑，也可以用模拟器/真机

   3.2 这样做的目的地就是不用在 DevEco 进行编译运行，这样的话编译速度快、看到项目内容结果方便，因为 DevEco 的 index.ets 代码仅仅是在显示 flutter 而已，所以类比下先在浏览器更加看到项目结果！

‍

4. 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. 项目运行结果

   5.1 代码讲解

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: '两页互动小例子',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: const HomePage(), // 首页
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  int _value = 50; // 要共享的数据

  @override
  Widget 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 就是 null
                if (result != null) {
                  setState(() => _value = result);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

/* ---------------- 设置页 ---------------- */
class SettingPage extends StatefulWidget {
  final int initialValue;
  const SettingPage({super.key, required this.initialValue});

  @override
  State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  late int _current; // 当前滑块值

  @override
  void initState() {
    super.initState();
    _current = widget.initialValue; // 把首页带来的值作为初始
  }

  @override
  Widget 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 浏览器运行结果

	![image](https://img2024.cnblogs.com/blog/2588266/202512/2588266-20251201133838499-1551352997.png "chrome 页面1")

5.3 DevEco 运行结果

	![image](https://img2024.cnblogs.com/blog/2588266/202512/2588266-20251201133842372-1015879919.png "模拟器页面1")

通过本文你知道了flutter 的：创建项目、语法结构、编译选择、例子练习！本文是初阶教程，后面陆续会出文章面向 Open Harmony，实现跨平台案例分享，内容为从低到高，希望可以帮助到大家！