HarmonyOS简易计算器

最新推荐文章于 2024-06-21 17:53:25 发布

qq_51740844

最新推荐文章于 2024-06-21 17:53:25 发布

阅读量923

点赞数

文章标签： harmonyos javascript 前端

本文链接：https://blog.csdn.net/qq_51740844/article/details/128354827

版权

前言

计算器是我们生活中经常使用的应用，此项目是基于Harmony实现的简易计算器，计算器的键盘，等后续组件完善了在做优化，目前 grid 适合一些均衡布局，通过监听计算符号添加判断逻辑，计算结果也是通过添加的计算类型进行计算，目前支持一级计算，后面做连续计算。

代码解析

子组件：

1，hml 文件

实用了四个 for 循环实现了键盘效果

<div class="container">
    <text class="input-content">{
  {inputcontent}}</text>
    <div class="menu-content">
        <div class="caluater" for="{
  { caluater }}" >
            <button class="content" onclick="calculatorClick({
  { $item.id }})">{
  { $item.id }}</button>
        </div>
    </div>
    <div class="menu-content">
        <div class="caluater" for="{
  { caluater1 }}">
            <button class="content2" on:click="calculatorClick({
  { $item.id }})">{
  { $item.id }}</button>
        </div>
    </div>
    <div class="menu-content">
        <div class="caluater" for="{
  { caluater2 }}">
            <button class="content2" on:click="calculatorClick({
  { $item.id }})">{
  { $item.id }}</button>
        </div>
    </div>

    <div class="list2-content">
        <div class="list3-content">
            <div class="list2-content">
                <div class="caluater" for="{
  { caluater3 }}">
                    <button class="content2" on:click="calculatorClick({
  { $item.id }})">{
  { $item.id }}</button