鸿蒙跨端框架Flutter学习day 1、变量与基本类型-咖啡店点餐逻辑
本文以咖啡店点餐场景为例,介绍了鸿蒙跨端开发中的变量建模与应用。通过对比var、final和const三种变量声明方式的特点及适用场景,阐述了不同数据类型的存储需求。重点讲解了late关键字在延迟初始化中的应用,以及如何通过状态管理实现UI更新。文章结合具体代码示例,展示了单价、数量和加浓选项等变量如何驱动总价计算逻辑,体现了Flutter开发中"变量变化驱动UI更新"的核心思
目录
一、 逻辑的起点:变量建模
在开发鸿蒙跨端应用时,第一步往往不是画 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)
当你不想显式写出 String 或 int 时,var 是你的好帮手。
var coffeeName = "拿铁 (Latte)"; // 自动推断为 String
2.2 不可变的约束 (final)
在点餐过程中,一旦下单,某些信息是不允许修改的。final 声明的变量只能赋值一次。
final orderTime = DateTime.now(); // 运行时确定的下单时间
2.3 极致的静态 (const)
如果咖啡店的名字是全球统一且永远不变的,我们应该使用 const。它在编译阶段就确定了值,性能最优。
const brandName = "Harmony Coffee"; // 编译时常量
三、 延迟的艺术:late 关键字与总价计算
在我们的 CoffeeOrderDemo 示例中,有一个有趣的现象:总价 totalPrice 依赖于数量和加浓选项,它无法在类实例化的一瞬间就完全确定。
late double totalPrice; // 延迟初始化
使用 late 关键字,我们告诉 Dart 编译器:“我知道现在还没给它赋值,但我保证在页面渲染(build)之前,我一定会通过 _updateTotal() 方法算出来。” 这种处理方式在 Flutter 的逻辑层非常常见。
四、 实战解析:点餐逻辑的代码实现
在 lib/main.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
更多推荐




所有评论(0)