返回发烧友论坛
发 帖  

[文章]如何使用HarmonyOS实现一个简单的计算器应用

李鸿洋
2021-08-23 14:02:11
阅读量0
HarmonyOS计算器
0
4
1. 介绍      本文档将为大家介绍如何使用HarmonyOS实现一个简单的计算器应用。该应用支持简单的加、减、乘、除以及取余运算。
图1-1 计算器交互界面         

   

2. 搭建HarmonyOS环境      

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
  • 安装DevEco Studio，详情请参考下载和安装软件。
  • 设置DevEco Studio开发环境，DevEco Studio开发环境依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  • 开发者可以参考以下链接，完成设备调试的相关配置：
    • 使用真机进行调试
    • 使用模拟器进行调试
您可以利用如下设备完成Codelab：
  • 开启了开发者模式的HarmonyOS真机或DevEco Studio自带模拟器。

    本篇文章使用的DevEco Studio版本为DevEco Studio 2.1 Beta4，使用的SDK版本为API Version 5。
3. 代码结构解读      本教程会对计算器应用的核心代码进行解读，首先为大家介绍整个工程的代码结构。

  • slice
    • MainAbilitySlice：计算器交互界面，用于完成界面元素渲染、按钮事件绑定动作。
  • utils
    • MathUtil：用于计算表达式结果的工具类，封装有运算符权重获取、表达式计算等方法。
  • resources
    • resourcesbaselayout：存放xml布局文件。
    • resourcesbasemedia：存放图片资源文件。
    • resourcesbasegraphic：存放xml样式文件。
  • MainAbility：HAP的入口ability，由DevEco Studio自动生成。
  • MyApplication：表示HAP的类，由DevEco Studio自动生成。
  • config.json：应用的配置文件，由DevEco Studio自动生成。
   
4. 应用初始化      

计算器应用使用的是自定义的按键，为避免用户在输入数学表达式时，系统自动弹出软键盘，本应用在初始化时，会在入口类MainAbility禁止应用弹出软键盘。
  1. // 禁止软键盘弹出
  2. getWindow().setLayoutFlags(WindowManager.LayoutConfig.MARK_ALT_FOCUSABLE_IM,
  3. WindowManager.LayoutConfig.MARK_ALT_FOCUSABLE_IM);
复制代码
随后会在计算器交互界面类MainAbilitySlice中，完成界面渲染和按键点击事件绑定。
  1. [url=home.php?mod=space&uid=2735960]@Override[/url]
  2. public void onStart(Intent intent) {
  3.     super.onStart(intent);
  4.     super.setUIContent(ResourceTable.Layout_ability_main);

  6.     initView();
  7.     initListener();
  8. }
复制代码
本示例的完整代码会在本教程的"完整示例"章节中给出，其他章节仅对核心代码进行讲解说明。

5. 算法表达式计算      

用户通过点击按键，输入要进行计算的数学表达式。用户每次输入新的字符，应用都会获取当前的表达式字符串，并判断是否需要进行计算。
  1. private void calculateResult(String exp, Boolean isAutoCalculate) {
  2.     if (exp.isEmpty()) {
  3.         return;
  4.     }
  5.     // 只有数字 不计算
  6.     String pattern = "(\d*\.?\d*)|(0\.\d*[1-9])";
  7.     boolean isMatch = Pattern.matches(pattern, exp);
  8.     if (isMatch) {
  9.         return;
  10.     }
  11.     // 末位是运算符 不计算
  12.     if (MathUtil.isOperator(exp.substring(exp.length() - 1))) {
  13.         return;
  14.     }

  16.     String resultValue;
  17.     try {
  18.         resultValue = MathUtil.getResultString(exp);
  19.     } catch (NumberFormatException | ArithmeticException | EmptyStackException e) {
  20.         preResult.setText("错误");
  21.         return;
  22.     }

  24.     if (isAutoCalculate) {
  25.         preResult.setText(resultValue);
  26.         return;
  27.     }
  28.     preResult.setText("");
  29.     inputText.setText(resultValue);     
  30. }
复制代码
若数学表达式字符串经过检查后，需要进行计算。程序则会调用MathUtil中的getResultString方法，对表达式进行计算。
步骤 1 -  把表达式拆分为数字和运算符，分别存放在两个栈中。
  1. Stack<String> numStack = new Stack<>();
  2. numStack.push(separateStr); // 数字用@分开，数字栈中@号 为了便于区分小数
  3. Stack<String> oprStack = new Stack<>();
复制代码

步骤 2 -  数字直接入数字栈。
  1. for (String singleStr : strings) {
  2.     if (isOperator(singleStr)) {
  3.         spiltExp(numStack, oprStack, singleStr);
  4.     } else {
  5.         numStack.push(singleStr);
  6.     }
  7. }
复制代码

步骤 3 -  如果是运算符，且当前运算符优先级小于等于栈中前一个运算符，则数字栈弹出两个数值，符号栈弹出一个运算符进行计算，计算结果入数字栈，当前运算符入符号栈；若当前运算符优先级大于栈中前一个运算符，则当前符号直接入栈。
  1. private static void spiltExp(Stack<String> numStack, Stack<String> oprStack, String singleStr) {
  2.     // 运算符间的字符拼接成一个数字
  3.     combineString(numStack);
  4.     if (!oprStack.isEmpty()) {
  5.         // 先处理优先级高的运算符
  6.         while (!oprStack.isEmpty() && priority(singleStr) <= priority(oprStack.peek())) {
  7.             combineString(numStack);
  8.             compute(numStack, oprStack);
  9.         }
  10.     }
  11.     oprStack.push(singleStr);
  12. }
复制代码

步骤 4 -  依次取出数字栈两个数值和符号栈的一个运算符，依次运算，结果入数字栈。
  1. private static void compute(Stack<String> numStack, Stack<String> oprStack) {
  2.     BigDecimal result = null;

  4.     numStack.pop();
  5.     BigDecimal rightNumber = new BigDecimal(numStack.pop());

  7.     numStack.pop();
  8.     BigDecimal leftNumber = new BigDecimal(numStack.pop());

  10.     String operator = oprStack.pop();
  11.     switch (operator) {
  12.         case "-":
  13.             result = leftNumber.subtract(rightNumber);
  14.             break;
  15.         case "+":
  16.             result = leftNumber.add(rightNumber);
  17.             break;
  18.         case "%":
  19.             result = leftNumber.divideAndRemainder(rightNumber)[1];
  20.             break;
  21.         case "×":
  22.             result = leftNumber.multiply(rightNumber);
  23.             break;
  24.         case "÷":
  25.             result = leftNumber.divide(rightNumber, DECIMAL_DIGIT, BigDecimal.ROUND_HALF_UP);
  26.             break;
  27.         default:
  28.             break;
  29.     }
  30.     numStack.push(result.stripTrailingZeros().toPlainString());
  31.     numStack.push(separateStr);
  32. }
复制代码

步骤 5 -  最后符号栈为空，数字栈只有一个数字，即为最终计算结果。
  1. while (!oprStack.isEmpty()) {
  2.     combineString(numStack);
  3.     compute(numStack, oprStack);
  4. }
  5. numStack.pop();
  6. String resultValue = numStack.peek();
复制代码

6. 完整示例      MainAbility
  1. package com.huawei.cookbook;

  3. import com.huawei.cookbook.slice.MainAbilitySlice;

  5. import ohos.aafwk.ability.Ability;
  6. import ohos.aafwk.content.Intent;
  7. import ohos.agp.window.service.WindowManager;

  9. /**
  10. * MainAbility
  11. *
  12. * @since 2021-04-29
  13. */
  14. public class MainAbility extends Ability {
  15.     @Override
  16.     public void onStart(Intent intent) {
  17.         // 禁止软键盘弹出
  18.         getWindow().setLayoutFlags(WindowManager.LayoutConfig.MARK_ALT_FOCUSABLE_IM,
  19.                 WindowManager.LayoutConfig.MARK_ALT_FOCUSABLE_IM);
  20.         super.onStart(intent);
  21.         super.setMainRoute(MainAbilitySlice.class.getName());
  22.     }
  23. }
复制代码
MainAbilitySlice
  1. package com.huawei.cookbook.slice;

  3. import com.huawei.cookbook.ResourceTable;
  4. import com.huawei.cookbook.utils.MathUtil;

  6. import ohos.aafwk.ability.AbilitySlice;
  7. import ohos.aafwk.content.Intent;
  8. import ohos.agp.components.Component;
  9. import ohos.agp.components.Text;
  10. import ohos.agp.components.TextField;

  12. import java.util.EmptyStackException;
  13. import java.util.regex.Pattern;

  15. /**
  16. * MainAbilitySlice
  17. *
  18. * @since 2021-04-29
  19. */
  20. public class MainAbilitySlice extends AbilitySlice {
  21.     /**
  22.      * number component
  23.      */
  24.     private static int[] numberComponentIds = {ResourceTable.Id_seven, ResourceTable.Id_eight, ResourceTable.Id_nine,
  25.         ResourceTable.Id_four, ResourceTable.Id_five, ResourceTable.Id_six, ResourceTable.Id_one,
  26.         ResourceTable.Id_two, ResourceTable.Id_three, ResourceTable.Id_zero, ResourceTable.Id_radix_point
  27.     };

  29.     /**
  30.      * operator component
  31.      */
  32.     private static int[] operatorComponentIds = {ResourceTable.Id_divide, ResourceTable.Id_multiply,
  33.         ResourceTable.Id_minus, ResourceTable.Id_divide_remainder, ResourceTable.Id_plus
  34.     };

  36.     private TextField inputText;
  37.     private Text preResult;

  39.     @Override
  40.     public void onStart(Intent intent) {
  41.         super.onStart(intent);
  42.         super.setUIContent(ResourceTable.Layout_ability_main);
  43.         initView();
  44.         initListener();
  45.     }

  47.     private void initView() {
  48.         if (findComponentById(ResourceTable.Id_input_text) instanceof TextField) {
  49.             inputText = (TextField) findComponentById(ResourceTable.Id_input_text);
  50.             inputText.requestFocus();
  51.         }
  52.         if (findComponentById(ResourceTable.Id_pre_result) instanceof Text) {
  53.             preResult = (Text) findComponentById(ResourceTable.Id_pre_result);
  54.         }
  55.     }

  57.     private void initListener() {
  58.         findComponentById(ResourceTable.Id_number_cancel).setClickedListener(new Component.ClickedListener() {
  59.             @Override
  60.             public void onClick(Component component) {
  61.                 preResult.setText("");
  62.                 inputText.setText("");
  63.             }
  64.         });

  66.         findComponentById(ResourceTable.Id_delete).setClickedListener(new Component.ClickedListener() {
  67.             @Override
  68.             public void onClick(Component component) {
  69.                 if (inputText.getText().isEmpty()) {
  70.                     return;
  71.                 }
  72.                 inputText.setText(inputText.getText().substring(0, inputText.getText().length() - 1));
  73.             }
  74.         });

  76.         findComponentById(ResourceTable.Id_equal_sign).setClickedListener(new Component.ClickedListener() {
  77.             @Override
  78.             public void onClick(Component component) {
  79.                 calculateResult(inputText.getText(), false);
  80.             }
  81.         });

  83.         for (int componentId : numberComponentIds) {
  84.             findComponentById(componentId).setClickedListener(new Component.ClickedListener() {
  85.                 @Override
  86.                 public void onClick(Component component) {
  87.                     bindNumberClickListener(componentId);
  88.                 }
  89.             });
  90.         }

  92.         for (int componentId : operatorComponentIds) {
  93.             findComponentById(componentId).setClickedListener(new Component.ClickedListener() {
  94.                 @Override
  95.                 public void onClick(Component component) {
  96.                     bindOperatorClickListener(componentId);
  97.                 }
  98.             });
  99.         }
  100.     }

  102.     private void bindNumberClickListener(int componentId) {
  103.         String oldValue = inputText.getText();
  104.         String inputValue = "";
  105.         if (findComponentById(componentId) instanceof Text) {
  106.             Text text = (Text) findComponentById(componentId);
  107.             inputValue = text.getText();
  108.         }

  110.         if (oldValue.isEmpty() && ".".equals(inputValue)) {
  111.             return;
  112.         }
  113.         if ("0".equals(oldValue) && !".".equals(inputValue)) {
  114.             inputText.setText(inputValue);
  115.         } else {
  116.             inputText.append(inputValue);
  117.         }
  118.         calculateResult(inputText.getText(), true);
  119.     }

  121.     private void bindOperatorClickListener(int componentId) {
  122.         String oldValue = inputText.getText();
  123.         String inputValue = "";
  124.         if (findComponentById(componentId) instanceof Text) {
  125.             Text text = (Text) findComponentById(componentId);
  126.             inputValue = text.getText();
  127.         }
  128.         if (oldValue.isEmpty()) {
  129.             inputText.setText(inputValue);
  130.         } else if (MathUtil.isOperator(oldValue.substring(oldValue.length() - 1))
  131.                 && MathUtil.isOperator(inputValue)) {
  132.             String newValue = oldValue.substring(0, oldValue.length() - 1) + inputValue;
  133.             inputText.setText(newValue);
  134.         } else {
  135.             inputText.append(inputValue);
  136.         }
  137.         calculateResult(inputText.getText(), true);
  138.     }

  140.     private void calculateResult(String exp, Boolean isAutoCalculate) {
  141.         if (exp.isEmpty()) {
  142.             return;
  143.         }
  144.         // 只有数字 不计算
  145.         String pattern = "(\d*\.?\d*)|(0\.\d*[1-9])";
  146.         boolean isMatch = Pattern.matches(pattern, exp);
  147.         if (isMatch) {
  148.             return;
  149.         }
  150.         // 末位是运算符 不计算
  151.         if (MathUtil.isOperator(exp.substring(exp.length() - 1))) {
  152.             return;
  153.         }

  155.         String resultValue;
  156.         try {
  157.             resultValue = MathUtil.getResultString(exp);
  158.         } catch (NumberFormatException | ArithmeticException | EmptyStackException e) {
  159.             preResult.setText("错误");
  160.             return;
  161.         }

  163.         if (isAutoCalculate) {
  164.             preResult.setText(resultValue);
  165.             return;
  166.         }
  167.         preResult.setText("");
  168.         inputText.setText(resultValue);
  169.     }

  171.     @Override
  172.     public void onActive() {
  173.         super.onActive();
  174.     }

  176.     @Override
  177.     public void onForeground(Intent intent) {
  178.         super.onForeground(intent);
  179.     }
  180. }
复制代码
MathUtil
  1. package com.huawei.cookbook.utils;

  3. import java.math.BigDecimal;
  4. import java.util.Stack;

  6. /**
  7. * MathUtil
  8. *
  9. * @since 2021-04-29
  10. */
  11. public class MathUtil {
  12.     // 数字栈中分隔数字时使用
  13.     private static String separateStr = "@";

  15.     // 保留小数位数
  16.     private static final int DECIMAL_DIGIT = 6;

  18.     // 不包含指定字符
  19.     private static final int NOT_CONTAIN = -1;

  21.     // 高优先级
  22.     private static final int HIGH_PRIORITY = 2;

  24.     // 低优先级
  25.     private static final int LOW_PRIORITY = 1;

  27.     private MathUtil() {
  28.     }

  30.     /**
  31.      * thinking:
  32.      * 1.Split the expression into numbers and operators, and store them in two stacks.
  33.      * 2.Numbers directly into the digital stack
  34.      * 3.If the priority is less than or equal to the previous operator in the stack, the
  35.      * calculation result is stored in the digit stack, and the current operator is stored in the symbol stack.
  36.      * If the priority is higher than that of the previous operator in the stack, the current symbol is directly
  37.      * added to the stack.
  38.      * 4.Obtain the two values of the digit stack and an operator of the symbol stack in sequence, perform operations
  39.      * in sequence, and import the results into the digit stack.
  40.      * 5.The final symbol stack is empty and the number stack contains only one digit, which is the final calculation
  41.      * result.
  42.      *
  43.      * [url=home.php?mod=space&uid=3142012]@param[/url] exp Mathematical Expression String
  44.      * [url=home.php?mod=space&uid=1141835]@Return[/url] Calculation result string
  45.      */
  46.     public static String getResultString(String exp) {
  47.         Stack<String> numStack = new Stack<>();
  48.         numStack.push(separateStr); // 数字用@分开，数字栈中@号 为了便于区分小数
  49.         Stack<String> oprStack = new Stack<>();

  51.         String[] strings = exp.split("");
  52.         for (String singleStr : strings) {
  53.             if (isOperator(singleStr)) {
  54.                 spiltExp(numStack, oprStack, singleStr);
  55.             } else {
  56.                 numStack.push(singleStr);
  57.             }
  58.         }
  59.         while (!oprStack.isEmpty()) {
  60.             combineString(numStack);
  61.             compute(numStack, oprStack);
  62.         }
  63.         numStack.pop();
  64.         String resultValue = numStack.peek();
  65.         return resultValue;
  66.     }

  68.     private static void spiltExp(Stack<String> numStack, Stack<String> oprStack, String singleStr) {
  69.         // 运算符间的字符拼接成一个数字
  70.         combineString(numStack);
  71.         if (!oprStack.isEmpty()) {
  72.             // 先处理优先级高的运算符
  73.             while (!oprStack.isEmpty() && priority(singleStr) <= priority(oprStack.peek())) {
  74.                 combineString(numStack);
  75.                 compute(numStack, oprStack);
  76.             }
  77.         }
  78.         oprStack.push(singleStr);
  79.     }

  81.     private static void compute(Stack<String> numStack, Stack<String> oprStack) {
  82.         BigDecimal result = null;

  84.         numStack.pop();
  85.         BigDecimal rightNumber = new BigDecimal(numStack.pop());

  87.         numStack.pop();
  88.         BigDecimal leftNumber = new BigDecimal(numStack.pop());

  90.         String operator = oprStack.pop();
  91.         switch (operator) {
  92.             case "-":
  93.                 result = leftNumber.subtract(rightNumber);
  94.                 break;
  95.             case "+":
  96.                 result = leftNumber.add(rightNumber);
  97.                 break;
  98.             case "%":
  99.                 result = leftNumber.divideAndRemainder(rightNumber)[1];
  100.                 break;
  101.             case "×":
  102.                 result = leftNumber.multiply(rightNumber);
  103.                 break;
  104.             case "÷":
  105.                 result = leftNumber.divide(rightNumber, DECIMAL_DIGIT, BigDecimal.ROUND_HALF_UP);
  106.                 break;
  107.             default:
  108.                 break;
  109.         }
  110.         numStack.push(result.stripTrailingZeros().toPlainString());
  111.         numStack.push(separateStr);
  112.     }

  114.     private static void combineString(Stack<String> stack) {
  115.         if (separateStr.equals(stack.peek())) {
  116.             return;
  117.         }
  118.         StringBuilder numberBuilder = new StringBuilder();
  119.         while (true) {
  120.             String string = stack.peek();
  121.             if (separateStr.equals(string)) {
  122.                 break;
  123.             }
  124.             numberBuilder.insert(0, string);
  125.             stack.pop();
  126.         }
  127.         stack.push(numberBuilder.toString());
  128.         stack.push(separateStr);
  129.         numberBuilder.delete(0, numberBuilder.length());
  130.     }

  132.     /**
  133.      * Determines whether a string is an operator.
  134.      *
  135.      * @param singleStr Character string to be judged
  136.      * @return Judgment Result
  137.      */
  138.     public static boolean isOperator(String singleStr) {
  139.         String operators = "-+×÷%";
  140.         if (operators.indexOf(singleStr) > NOT_CONTAIN) {
  141.             return true;
  142.         }
  143.         return false;
  144.     }

  146.     private static int priority(String str) {
  147.         String highOperator = "×÷%";
  148.         if (highOperator.indexOf(str) > NOT_CONTAIN) {
  149.             return HIGH_PRIORITY;
  150.         }
  151.         return LOW_PRIORITY;
  152.     }
  153. }
复制代码
xml样式文件
  • base/graphic/background_ability_main.xml
    1. <?xml version="1.0" encoding="UTF-8" ?>
    2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    3. ohos:shape="rectangle">
    4. <solid ohos:color="#E2E2E2" />
    5. </shape>
    复制代码

  • base/graphic/background_denghao.xml
    1. <?xml version="1.0" encoding="UTF-8" ?>
    2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    3. ohos:shape="rectangle">
    4. <solid ohos:color="blue" />
    5. <corners ohos:radius="180" />
    6. </shape>
    复制代码

  • base/graphic/background_keyboard.xml
    1. <?xml version="1.0" encoding="UTF-8" ?>
    2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    3. ohos:shape="rectangle">
    4. <solid ohos:color="#EEEEEE" />
    5. <corners ohos:radius="36" />
    6. </shape>
    复制代码

  • base/graphic/background_round.xml
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval">
    3. <solid
    4.     ohos:color="#FFFFFF"/>
    5. <stroke
    6.     ohos:width="3vp"
    7.     ohos:color="#FFFFFF"/>
    8. </shape>
    复制代码

xml布局文件
  • base/layout/ability_main.xml
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    3. ohos:height="match_parent"
    4. ohos:orientation="vertical"
    5. ohos:alignment="bottom"
    6. ohos:background_element="$graphic:background_ability_main"
    7. ohos:width="match_parent">

    9. <DirectionalLayout
    10.     ohos:id="$+id:result_console"
    11.     ohos:height="match_content"
    12.     ohos:left_margin="15vp"
    13.     ohos:right_margin="15vp"
    14.     ohos:bottom_margin="50vp"
    15.     ohos:width="match_parent">

    17.     <TextField
    18.         ohos:id="$+id:input_text"
    19.         ohos:height="60vp"
    20.         ohos:width="match_parent"
    21.         ohos:text_size="48vp"
    22.         ohos:bubble_height="0"
    23.         ohos:multiple_lines="false"
    24.         ohos:text_alignment="right"/>

    26.     <Text
    27.         ohos:id="$+id:pre_result"
    28.         ohos:margin="3vp"
    29.         ohos:height="42vp"
    30.         ohos:width="match_parent"
    31.         ohos:text_size="36vp"
    32.         ohos:text_color="#555555"
    33.         ohos:scrollable="true"
    34.         ohos:text_alignment="right"/>

    36. </DirectionalLayout>

    38. <DirectionalLayout
    39.     ohos:id="$+id:calculate_keyboard"
    40.     ohos:height="match_content"
    41.     ohos:padding="8vp"
    42.     ohos:margin="8vp"
    43.     ohos:background_element="$graphic:background_keyboard"
    44.     ohos:width="match_parent">

    46.     <DirectionalLayout
    47.         ohos:height="match_content"
    48.         ohos:width="match_parent"
    49.         ohos:alignment="center"
    50.         ohos:orientation="horizontal">

    52.         <Text
    53.             ohos:id="$+id:number_cancel"
    54.             ohos:text_alignment="center"
    55.             ohos:height="70vp"
    56.             ohos:width="70vp"
    57.             ohos:text_size="30vp"
    58.             ohos:text_color="blue"
    59.             ohos:background_element="$graphic:background_round"
    60.             ohos:margin="8vp"
    61.             ohos:text="C"/>

    63.         <Text
    64.             ohos:id="$+id:divide"
    65.             ohos:text_alignment="center"
    66.             ohos:height="70vp"
    67.             ohos:width="70vp"
    68.             ohos:text_size="35vp"
    69.             ohos:text_color="blue"
    70.             ohos:background_element="$graphic:background_round"
    71.             ohos:margin="8vp"
    72.             ohos:text="÷"/>

    74.         <Text
    75.             ohos:id="$+id:multiply"
    76.             ohos:text_alignment="center"
    77.             ohos:height="70vp"
    78.             ohos:width="70vp"
    79.             ohos:text_size="35vp"
    80.             ohos:text_color="blue"
    81.             ohos:background_element="$graphic:background_round"
    82.             ohos:margin="8vp"
    83.             ohos:text="×"/>

    85.         <Image
    86.             ohos:id="$+id:delete"
    87.             ohos:text_alignment="center"
    88.             ohos:height="70vp"
    89.             ohos:width="70vp"
    90.             ohos:text_size="28vp"
    91.             ohos:background_element="$graphic:background_round"
    92.             ohos:margin="8vp"
    93.             ohos:image_src="$media:delete"/>
    94.     </DirectionalLayout>

    96.     <DirectionalLayout
    97.         ohos:height="match_content"
    98.         ohos:width="match_parent"
    99.         ohos:alignment="center"
    100.         ohos:orientation="horizontal">

    102.         <Text
    103.             ohos:id="$+id:seven"
    104.             ohos:text_alignment="center"
    105.             ohos:height="70vp"
    106.             ohos:width="70vp"
    107.             ohos:text_size="30vp"
    108.             ohos:background_element="$graphic:background_round"
    109.             ohos:margin="8vp"
    110.             ohos:text="7"/>

    112.         <Text
    113.             ohos:id="$+id:eight"
    114.             ohos:text_alignment="center"
    115.             ohos:height="70vp"
    116.             ohos:width="70vp"
    117.             ohos:text_size="30vp"
    118.             ohos:background_element="$graphic:background_round"
    119.             ohos:margin="8vp"
    120.             ohos:text="8"/>

    122.         <Text
    123.             ohos:id="$+id:nine"
    124.             ohos:text_alignment="center"
    125.             ohos:height="70vp"
    126.             ohos:width="70vp"
    127.             ohos:text_size="30vp"
    128.             ohos:background_element="$graphic:background_round"
    129.             ohos:margin="8vp"
    130.             ohos:text="9"/>

    132.         <Text
    133.             ohos:id="$+id:minus"
    134.             ohos:text_alignment="center"
    135.             ohos:height="70vp"
    136.             ohos:width="70vp"
    137.             ohos:text_color="blue"
    138.             ohos:text_size="30vp"
    139.             ohos:background_element="$graphic:background_round"
    140.             ohos:margin="8vp"
    141.             ohos:text="-"/>
    142.     </DirectionalLayout>

    144.     <DirectionalLayout
    145.         ohos:height="match_content"
    146.         ohos:width="match_parent"
    147.         ohos:alignment="center"
    148.         ohos:orientation="horizontal">

    150.         <Text
    151.             ohos:id="$+id:four"
    152.             ohos:text_alignment="center"
    153.             ohos:height="70vp"
    154.             ohos:width="70vp"
    155.             ohos:text_size="30vp"
    156.             ohos:background_element="$graphic:background_round"
    157.             ohos:margin="8vp"
    158.             ohos:text="4"/>

    160.         <Text
    161.             ohos:id="$+id:five"
    162.             ohos:text_alignment="center"
    163.             ohos:height="70vp"
    164.             ohos:width="70vp"
    165.             ohos:text_size="30vp"
    166.             ohos:background_element="$graphic:background_round"
    167.             ohos:margin="8vp"
    168.             ohos:text="5"/>

    170.         <Text
    171.             ohos:id="$+id:six"
    172.             ohos:text_alignment="center"
    173.             ohos:height="70vp"
    174.             ohos:width="70vp"
    175.             ohos:text_size="30vp"
    176.             ohos:background_element="$graphic:background_round"
    177.             ohos:margin="8vp"
    178.             ohos:text="6"/>

    180.         <Text
    181.             ohos:id="$+id:plus"
    182.             ohos:text_alignment="center"
    183.             ohos:height="70vp"
    184.             ohos:width="70vp"
    185.             ohos:text_color="blue"
    186.             ohos:text_size="30vp"
    187.             ohos:background_element="$graphic:background_round"
    188.             ohos:margin="8vp"
    189.             ohos:text="+"/>
    190.     </DirectionalLayout>

    192.     <DirectionalLayout
    193.         ohos:height="match_content"
    194.         ohos:width="match_parent"
    195.         ohos:orientation="horizontal"
    196.         ohos:alignment="center">
    197.         <DirectionalLayout
    198.             ohos:height="match_content"
    199.             ohos:width="match_content">

    201.             <DirectionalLayout
    202.                 ohos:height="match_content"
    203.                 ohos:width="match_parent"
    204.                 ohos:alignment="center"
    205.                 ohos:orientation="horizontal">

    207.                 <Text
    208.                     ohos:id="$+id:one"
    209.                     ohos:text_alignment="center"
    210.                     ohos:height="70vp"
    211.                     ohos:width="70vp"
    212.                     ohos:text_size="30vp"
    213.                     ohos:background_element="$graphic:background_round"
    214.                     ohos:margin="8vp"
    215.                     ohos:text="1"/>

    217.                 <Text
    218.                     ohos:id="$+id:two"
    219.                     ohos:text_alignment="center"
    220.                     ohos:height="70vp"
    221.                     ohos:width="70vp"
    222.                     ohos:text_size="30vp"
    223.                     ohos:background_element="$graphic:background_round"
    224.                     ohos:margin="8vp"
    225.                     ohos:text="2"/>

    227.                 <Text
    228.                     ohos:id="$+id:three"
    229.                     ohos:text_alignment="center"
    230.                     ohos:height="70vp"
    231.                     ohos:width="70vp"
    232.                     ohos:text_size="30vp"
    233.                     ohos:background_element="$graphic:background_round"
    234.                     ohos:margin="8vp"
    235.                     ohos:text="3"/>
    236.             </DirectionalLayout>

    238.             <DirectionalLayout
    239.                 ohos:height="match_content"
    240.                 ohos:width="match_parent"
    241.                 ohos:alignment="center"
    242.                 ohos:orientation="horizontal">

    244.                 <Text
    245.                     ohos:id="$+id:divide_remainder"
    246.                     ohos:text_alignment="center"
    247.                     ohos:height="70vp"
    248.                     ohos:width="70vp"
    249.                     ohos:text_size="30vp"
    250.                     ohos:background_element="$graphic:background_round"
    251.                     ohos:margin="8vp"
    252.                     ohos:text="%"/>

    254.                 <Text
    255.                     ohos:id="$+id:zero"
    256.                     ohos:text_alignment="center"
    257.                     ohos:height="70vp"
    258.                     ohos:width="70vp"
    259.                     ohos:text_size="30vp"
    260.                     ohos:background_element="$graphic:background_round"
    261.                     ohos:margin="8vp"
    262.                     ohos:text="0"/>

    264.                 <Text
    265.                     ohos:id="$+id:radix_point"
    266.                     ohos:text_alignment="center"
    267.                     ohos:height="70vp"
    268.                     ohos:width="70vp"
    269.                     ohos:text_size="30vp"
    270.                     ohos:background_element="$graphic:background_round"
    271.                     ohos:margin="8vp"
    272.                     ohos:text="."/>
    273.             </DirectionalLayout>

    275.         </DirectionalLayout>

    277.         <Text
    278.             ohos:id="$+id:equal_sign"
    279.             ohos:text_alignment="center"
    280.             ohos:height="150vp"
    281.             ohos:width="70vp"
    282.             ohos:text_size="35vp"
    283.             ohos:text_color="#FFFFFF"
    284.             ohos:background_element="$graphic:background_denghao"
    285.             ohos:margin="8vp"
    286.             ohos:text="="/>
    287.     </DirectionalLayout>

    289. </DirectionalLayout>

    291. </DirectionalLayout>
    复制代码

以上代码示例仅供参考，产品化的代码需要考虑数据校验和国际化。

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友