尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

【天体运行模拟|07】HarmonyOS ArkTS 公式页实战:呈现引力、圆周运动与单位说明

【天体运行模拟|07】HarmonyOS ArkTS 公式页实战:呈现引力、圆周运动与单位说明 物理公式页看起来像一个简单列表真正做起来却同时涉及三类准确性公式本身要正确符号与单位要让用户看懂ArkUI 页面还要在手机、平板和 2in1 上保持可读。只把一串 Unicode 字符放进Text可以快速完成首版却不等于已经建立了可验证的知识模型。“天体运行模拟”的FormulaPage.ets提供了一个真实而清晰的起点页面用FormulaItem描述名称、公式、说明和分类内置万有引力、圆轨道速度、逃逸速度、动能、引力势能、质心和天文单位七条内容顶部用横向滚动分类条切换“全部、引力、轨道、能量、尺度”下方用List呈现公式卡片。本文从这份源码出发分析如何在 HarmonyOS 5.0 及以上版本中组织公式数据、符号、单位和响应式布局并明确当前边界现有页面是静态速查不会计算结果公式使用 Unicode 近似排版没有 MathML 或专业公式渲染多数条目没有完整单位说明。建议方案会与已实现能力严格区分。唯一复核标记FORMULA-ONE13-GRAVITY-UNITS-20260726公式字符串负责速查符号与单位模型负责解释数值计算必须先完成量纲校验。验证基线与真实数据本文面向 HarmonyOS 5.0 及以上版本。实际工程应用版本为1.0.0targetSdkVersion为6.0.2(22)compatibleSdkVersion为6.0.1(21)入口模块覆盖phone、tablet、2in1。本次只复核FormulaPage.ets及其真实路由入口不把文章中的增强代码视为已上线功能。源码静态统计如下项目实际数量公式条目7分类筛选项5引力类条目2轨道类条目2能量类条目2尺度类条目1数值计算入口0专业公式渲染组件0七条公式分别是F GMm / r²、v √(GM / r)、vₑ √(2GM / r)、Ek ½mv²、Ep -GMm / r、R Σmᵢrᵢ / Σmᵢ和1 AU ≈ 1.496×10⁸ km。这些内容可以直接从formulas数组复核。一、用FormulaItem统一卡片数据当前模型只有四个字段interface FormulaItem { name: string formula: string description: string category: string }这种结构适合静态速查页。页面不需要为每条公式写独立组件只需遍历数组ForEach(this.filteredFormulas(), (item: FormulaItem) { ListItem() { // render item } } )数据与布局分离后添加公式只需新增对象不必复制整段 ArkUI。它也让分类筛选可以复用同一字段。不过formula只是显示字符串description只是自然语言。若未来要做单位解释、变量高亮或计算器这四个字段还不够。二、七条真实公式覆盖了什么现有条目形成四组知识引力万有引力、质心。轨道圆轨道速度、逃逸速度。能量动能、引力势能。尺度天文单位。这不是百科全书式堆砌而是围绕模拟页的质量、速度、距离和轨迹形成最小知识闭环。例如圆轨道速度和逃逸速度共享GM/r但前者对应闭合圆轨道条件后者对应总机械能不小于零的临界条件。公式页标题使用“引力速查”因此范围控制是合理的。若继续扩展应优先补充轨道周期、角动量和开普勒第三定律而不是随意加入无关公式。三、万有引力公式要同时解释变量与方向页面当前显示F GMm / r²它给出的是力的大小。变量含义应明确符号含义SI 单位F两个天体间引力大小NG万有引力常量m³/(kg·s²)M、m两个天体质量kgr两质心距离m页面说明“随距离平方减小”容易产生歧义更准确的表达是“力的大小与距离平方成反比”。同时还要强调方向沿两天体质心连线彼此相反。如果把它用于模拟计算不能只计算标量const dx x2 - x1 const dy y2 - y1 const r2 dx * dx dy * dy const r Math.sqrt(r2) const force G * m1 * m2 / r2 const fx force * dx / r const fy force * dy / r还必须设置最小距离或软化参数避免r 0导致除零。当前公式页不执行这段计算文章示例只用于说明公式到向量实现的差异。四、圆轨道速度隐含了适用条件页面显示v √(GM / r)这个式子来自向心力与万有引力平衡mv² / r GMm / r²约去测试天体质量m后得到圆轨道速度。它隐含中心天体质量远大于绕行天体。轨道近似圆形。只考虑两体引力。速度方向与半径方向垂直。若用户在三体系统中直接套用它结果只是一组近似初值。公式页最好显示“适用条件”避免公式看起来像任何场景都成立的通用按钮。五、逃逸速度与圆轨道速度的关系现有逃逸速度为vₑ √(2GM / r)在相同M与r下vₑ √2 · v圆这个关系非常适合做同卡片关联。用户看到圆轨道速度后可以直接理解速度低于圆轨道速度不一定立即坠落可能形成椭圆轨道。等于圆轨道速度且方向正确时形成圆轨道。高于圆轨道速度但低于逃逸速度时通常仍受束缚。达到逃逸速度是理想两体模型下离开束缚的临界条件。现有描述“达到该速度后可离开引力束缚”是合适的速查表述但计算功能还应说明不考虑大气阻力、其他天体和自转。六、能量公式需要统一符号源码中动能写作Ek ½mv²引力势能写作Ep -GMm / rUnicode 形式在普通Text中可读但下标并不统一Ek与Ep是普通字母逃逸速度却使用vₑ。建议统一为Eₖ ½mv² Eₚ -GMm / r或者统一使用 ASCII 形式避免部分字体缺字E_k 1/2 mv^2 E_p -GMm/r选择哪一种取决于目标字体与设备实测。不要在同一页面混用多套下标规则。七、负引力势能不是“负能量错误”Ep -GMm/r的负号来自把无穷远处势能定义为零。天体越靠近势能越低也就是数值更负。对两体近似总机械能为E ½mv² - GMm/r当E 0时通常是束缚轨道E 0对应抛物线逃逸临界E 0对应非束缚轨道。这个解释可以把“能量”分类和“轨道”分类连接起来。页面当前每条卡片只有一句说明。若内容继续增长建议增加折叠详情不要把所有推导都堆在列表首屏。八、质心公式中的R是向量源码显示R Σmᵢrᵢ / Σmᵢ其中rᵢ表示第i个天体的位置向量因此R也是向量。在二维模拟里可以分别计算interface Point { x: number y: number } function centerOfMass( bodies: BodyMassPoint[] ): Point { let totalMass 0 let weightedX 0 let weightedY 0 bodies.forEach((body: BodyMassPoint) { totalMass body.mass weightedX body.mass * body.x weightedY body.mass * body.y }) if (totalMass 0) { return { x: 0, y: 0 } } return { x: weightedX / totalMass, y: weightedY / totalMass } }若只写“共同质心旋转”用户可能不知道它是可计算的位置。变量说明应标记rᵢ和R为位置向量。九、天文单位是尺度换算不是动力学公式现有尺度条目1 AU ≈ 1.496×10⁸ km它用于描述太阳系距离。更精确的定义值是1 AU 149 597 870.7 km速查页使用近似值没有问题但要在模型中标记精度。若计算器输入 AU再输出 km 或 m应使用统一常量const AU_IN_METERS: number 149_597_870_700显示层可以舍入计算层不要从显示字符串1.496×10⁸ km反向解析数值。十、分类筛选是一个纯派生状态源码只保存selectedCategory列表通过函数派生private filteredFormulas(): FormulaItem[] { const cat this.categories[this.selectedCategory] if (cat 全部) { return this.formulas } return this.formulas.filter( f f.category cat ) }这种方式不会维护第二份过滤数组避免分类变化后手工同步。七条数据规模下每次过滤开销可以忽略。风险在于分类仍是普通字符串。如果把某个条目误写成“轨道学”编译器不会报错该条目只会在“全部”中出现。可以收紧为联合类型type FormulaCategory | 引力 | 轨道 | 能量 | 尺度 interface FormulaItem { name: string formula: string description: string category: FormulaCategory }十一、横向滚动分类条适合窄屏分类条放在Scroll() { Row({ space: 8 }) { // categories } } .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off)这样手机窄屏不必压缩五个标签。被选项使用主色背景未选项使用卡片背景和分隔线同时保留文字颜色差异。不过关闭滚动条后用户不一定知道右侧还有内容。当前只有五项通常能通过首屏露出下一项形成提示未来分类增加时可以让末尾保留部分可见宽度或在平板上改为不滚动的Flex布局。十二、公式卡片的视觉层级每张卡片依次显示名称。21vp 粗体公式。说明。分类标签。公式使用主色名称使用正文色说明使用次级色阅读顺序明确。List({ space: 10 })负责纵向虚拟化和滚动适合公式继续增加后的性能。卡片内部使用固定padding(16)边框与背景来自主题常量。圆角使用Constants.SMALL_RADIUS避免每个页面自行定义。十三、Unicode 公式的优势与边界Text(F GMm / r²)的优势是无额外依赖。与 ArkUI 字体、颜色和无障碍树自然集成。加载快离线可用。适合一行短公式。边界也很明确复杂分式不能垂直排版。多层上下标可读性下降。根号覆盖范围只能靠括号表达。字体可能缺少部分数学字符。无法对单个变量单独着色或点击解释。对于当前七条短公式Unicode 是保守而有效的选择。只有当产品需要矩阵、积分、长分式或交互变量时才值得引入更专业的排版方案。十四、把符号说明做成结构化模型建议扩展模型interface FormulaSymbol { symbol: string meaning: string unit: string } interface FormulaItem { id: string name: string formula: string description: string category: FormulaCategory symbols: FormulaSymbol[] assumptions: string[] }万有引力条目可定义{ id: universal_gravity, name: 万有引力, formula: F GMm / r², category: 引力, symbols: [ { symbol: F, meaning: 引力大小, unit: N }, { symbol: M, meaning: 中心天体质量, unit: kg }, { symbol: m, meaning: 测试天体质量, unit: kg }, { symbol: r, meaning: 质心距离, unit: m } ], assumptions: [点质量近似, 仅考虑两体作用] }这样详情页、无障碍朗读和计算器可以共享同一份语义不必从公式字符串猜变量。十五、数值计算前先定义单位策略当前模拟页使用M、px、v等教学单位公式页展示 SI 物理公式和 AU。二者不能直接代入除非建立尺度映射。推荐明确两层interface DisplayQuantity { value: number unit: M | px | v | AU | km } interface SIQuantity { value: number unit: kg | m | m/s | N | J }教学模拟可以继续使用归一化单位但公式计算器必须告诉用户当前输入是现实 SI 单位还是模拟单位。G使用真实常量还是归一化常量。距离px如何映射到m。输出是否只用于趋势演示。如果这些规则没有定义就不应添加“计算”按钮。十六、量纲校验可以提前发现错误以圆轨道速度为例[G] m³·kg⁻¹·s⁻² [M] kg [r] m因此[GM/r] m²·s⁻² √[GM/r] m·s⁻¹结果确实是速度单位。逃逸速度多了无量纲系数 2量纲不变。对于引力[GMm/r²] kg·m·s⁻² N对每条公式保存resultUnit和输入单位可以在开发测试中执行量纲断言。页面速查不必展示完整推导但模型应能支持核验。十七、页面状态还可以更完整当前公式数据写在页面里始终有内容所以不需要加载状态。若将来从资源文件或数据库读取应补齐loadingcontentemptyerror即使保持静态数据也应处理无匹配分类。当前分类数组与公式分类一致不会出现该情况类型收紧后这个不变量更容易保持。错误状态不应伪造成空状态。“暂无公式”和“公式数据加载失败”对用户是两件不同的事。十八、多设备布局策略源码根容器使用.width(100%) .height(100%) .padding({ top: this.statusBarHeight, bottom: this.bottomBarHeight })手机上单列列表合理。平板与 2in1 可以根据可用宽度增强而不改变数据模型小于 600vp单列卡片。600vp 到 960vp两列公式网格或主列表加详情。更宽窗口左侧分类导航右侧公式详情。不要单纯把卡片拉到超宽。长行会降低说明文字可读性可限制内容最大宽度并居中。十九、状态栏、底部安全区与滚动页面通过StorageProp获取状态栏和底栏高度根容器增加上下 padding。List使用layoutWeight(1)占据剩余空间顶部导航和分类条保持可见。需要设备验证手势导航与三键导航。横屏小窗口。平板分屏。2in1 窗口缩放。系统字体放大。底部 List 的padding.bottom当前为 12再叠加根容器bottomBarHeight。如果全局高度已包含系统避让应避免重复留白具体取决于入口处如何写入该状态值。二十、无障碍不能只朗读视觉公式屏幕阅读器直接朗读v √(GM / r)可能不够自然。结构化符号模型可以提供更清晰的替代文本圆轨道速度等于万有引力常量乘中心天体质量除以轨道半径再开平方。分类标签需要足够触控面积和选中状态语义公式卡片可以组合为一个可聚焦单元也可以让名称与符号说明分别聚焦但不要让装饰性分类标签重复朗读。颜色不能成为唯一选中提示。当前选中项同时改变背景、文字和边框方向是正确的还应在真机无障碍服务下核验。二十一、可执行的测试清单测试当前源码预期初始进入展示全部 7 条选择“引力”展示万有引力、质心共 2 条选择“轨道”展示圆轨道速度、逃逸速度共 2 条选择“能量”展示动能、引力势能共 2 条选择“尺度”只展示天文单位共 1 条点击返回调用router.back()横向窄屏分类条可滚动纵向长内容List 可滚动且卡片不重叠增强模型上线后还要增加每个公式 ID 唯一。每个分类属于联合类型。每个变量具有含义和单位。结果单位与量纲断言一致。Unicode 字符在目标字体中可显示。大字体下公式与说明不截断。二十二、发布前公式页检查公式符号与说明一致。r明确表示质心距离。圆轨道速度标出两体与圆轨道近似。逃逸速度说明理想模型边界。势能负号有解释。质心位置标明向量含义。AU 的近似精度有标识。模拟单位与 SI 单位不混用。分类字符串由类型约束。字体放大后公式不溢出。手机、平板、2in1 保持合适行宽。状态栏、底部导航和返回操作可用。二十三、总结当前FormulaPage.ets用很少的代码完成了可用的离线速查七条真实公式由统一模型驱动五个分类通过纯派生函数过滤横向 Scroll 保护窄屏分类条List 负责公式卡片的纵向呈现。对于短公式原生Text加 Unicode 是低成本且稳定的实现。继续演进时重点不应只是增加公式数量而是补上符号、单位、适用条件、量纲和无障碍描述。显示字符串服务于阅读结构化知识模型服务于验证与计算在单位映射没有确定之前宁可保持诚实的“速查页”也不要提供看似精确但量纲不明的计算结果。说明本文基于真实 HarmonyOS/ArkTS 源码进行整理部分文字与示例由 AI 辅助生成所有现有能力与建议改造已明确区分。
返回列表