声明

本文源自21天开源鸿蒙跨平台训练营活动-第五篇博客

一、通过 cmd 创建项目

        1.1这里注意创建项目时不要用大写，全小写即可！

二、通过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 编写的，对于曾经写过 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});

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

5.3 DevEco 运行结果

六、总结

通过本文你知道了flutter 的：创建项目、语法结构、编译选择、例子练习！本文是初阶教程，后面陆续会出文章面向 Open Harmony，实现跨平台案例分享。

内容为从低到高，希望可以帮助到大家！