鸿蒙跨端框架Flutter学习day 1、变量与基本类型-咖啡店点餐逻辑

目录

  • [一、 逻辑的起点:变量建模](#一、 逻辑的起点:变量建模)
  • [二、 深入浅出:var, final 与 const 的点餐实践](#二、 深入浅出:var, final 与 const 的点餐实践)
  • [三、 延迟的艺术:late 关键字与总价计算](#三、 延迟的艺术:late 关键字与总价计算)
  • [四、 实战解析:点餐逻辑的代码实现](#四、 实战解析:点餐逻辑的代码实现)
  • [五、 结语](#五、 结语)

一、 逻辑的起点:变量建模

在开发鸿蒙跨端应用时,第一步往往不是画 UI,而是对业务进行"变量建模"。想象一个咖啡店点餐场景,我们需要记录哪些信息?咖啡的名字、单价、数量、是否加浓。这些信息在代码中就转化为了不同类型的变量。

二、 深入浅出:var, final 与 const 的点餐实践

特性维度 var (ArkTS) final (ArkTS) const (ArkTS)
核心语义 声明函数级作用域变量(兼容 ES5) 标记「不可重新赋值」的变量(块级作用域) 声明编译期/运行时常量(块级作用域,不可变)
变量可变性 可重复赋值、可重复声明 不可重新赋值(引用不变,对象/数组内容可变) 不可重复赋值、不可重复声明(引用和基础类型值均不可变)
作用域 函数级作用域(无块级隔离) 块级作用域(if/for/{} 可隔离) 块级作用域(if/for/{} 可隔离)
变量提升 存在(声明提升,赋值不提升) 无(暂时性死区) 无(暂时性死区)
重复声明 同一作用域允许重复声明 同一作用域禁止重复声明 同一作用域禁止重复声明
初始化要求 可先声明后赋值(如 var a; 局部变量:必须初始化;类成员变量:可延迟初始化 必须立即初始化(如 const a = 1;),且值需确定
适用数据类型 支持所有类型 支持所有类型(对象/数组/基础类型) 基础类型(number/string/boolean)、字面量对象/数组(不可改引用)
典型使用场景 兼容老 JS 代码(不推荐使用) 声明无需重新赋值的变量(如函数入参、临时计算值) 声明固定配置(如接口地址、常量值、枚举值)

2.1 动态推断 (var)

当你不想显式写出 Stringint 时,var 是你的好帮手。

dart 复制代码
var coffeeName = "拿铁 (Latte)"; // 自动推断为 String

2.2 不可变的约束 (final)

在点餐过程中,一旦下单,某些信息是不允许修改的。final 声明的变量只能赋值一次。

dart 复制代码
final orderTime = DateTime.now(); // 运行时确定的下单时间

2.3 极致的静态 (const)

如果咖啡店的名字是全球统一且永远不变的,我们应该使用 const。它在编译阶段就确定了值,性能最优。

dart 复制代码
const brandName = "Harmony Coffee"; // 编译时常量

三、 延迟的艺术:late 关键字与总价计算

在我们的 CoffeeOrderDemo 示例中,有一个有趣的现象:总价 totalPrice 依赖于数量和加浓选项,它无法在类实例化的一瞬间就完全确定。

dart 复制代码
late double totalPrice; // 延迟初始化

使用 late 关键字,我们告诉 Dart 编译器:"我知道现在还没给它赋值,但我保证在页面渲染(build)之前,我一定会通过 _updateTotal() 方法算出来。" 这种处理方式在 Flutter 的逻辑层非常常见。

四、 实战解析:点餐逻辑的代码实现

lib/main.dart 中,我们通过以下核心逻辑实现了点餐计算:

dart 复制代码
void _updateTotal() {
  setState(() {
    // 计算公式:(单价 * 数量) + 加浓费(5元)
    totalPrice = (unitPrice * quantity) + (extraShot ? 5.0 : 0.0);
  });
}
  • 数据类型应用unitPrice (double) 处理小数,quantity (int) 处理整数,extraShot (bool) 处理开关。
  • 状态驱动 :当我们调用 setState 时,这些变量的新值会立即反映在 UI 上的"应付总额"中。

五、 结语

变量是程序的"记忆",而正确的声明方式则是"记忆的规则"。在 Day 1 的学习中,通过咖啡店点餐这个贴近生活的案例,我们不仅学会了如何存储数据,更理解了如何通过变量的变化来驱动 UI 的更新。这是 Flutter 开发最基础,也是最核心的逻辑。


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

相关推荐
软件聚导航6 小时前
马年、我用AI写了个“打工了马” 小程序
人工智能·ui·微信小程序
灰灰勇闯IT6 小时前
Flutter for OpenHarmony:图标与 Asset 资源管理 —— 构建高性能、可维护的视觉资源体系
flutter
子春一7 小时前
Flutter for OpenHarmony:构建一个 Flutter 记忆翻牌游戏,深入解析状态管理、动画交互与经典配对逻辑
flutter·游戏·交互
wdfk_prog7 小时前
[Linux]学习笔记系列 -- [drivers][i2c]i2c-dev
linux·笔记·学习
Lancker8 小时前
定制侠 一个国产纯血鸿蒙APP的诞生过程
android·华为·智能手机·鸿蒙·国产操作系统·纯血鸿蒙·华为鸿蒙
2601_949847758 小时前
Flutter for OpenHarmony音乐播放器App实战13:歌手列表实现
flutter
越努力越幸运5088 小时前
CSS3学习之网格布局grid
前端·学习·css3
雨季6669 小时前
破界与共生:HarmonyOS原生应用生态全景图谱与PC时代三重变局
flutter·华为·harmonyos
REDcker9 小时前
鸿蒙系统发展史与纯血鸿蒙详解
华为·harmonyos·鸿蒙·鸿蒙系统
梦想不只是梦与想9 小时前
鸿蒙中 Scroll可滚动组件
harmonyos·鸿蒙·scroll