当前位置：主页 > 查看内容

在鸿蒙HarmonyOS智慧屏上实现一款粗糙的计算器

发布时间：2021-07-28 00:00| 有 位朋友查看

简介：想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://harmonyos.51cto.com/#zz 在学习的路上我们不能只是停留在对理论知识的理解，还应该将理论和实战进行结合，这样才有利于我们能够更有深度的掌握知识，最终形成自己的知识体系结……

 

想了解更多内容，请访问：

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

在学习的路上我们不能只是停留在对理论知识的理解，还应该将理论和实战进行结合，这样才有利于我们能够更有深度的掌握知识，最终形成自己的知识体系结构。我们在实战的时候，不仅可以巩固我们的理论知识，还能够在实战中发现问题，并找到合适的解决方案。

前面的章节中我们已经学习了六大布局和常用的组件，我们在学习布局和组件的时候也有一些小示例。通过这些小示例我们仅仅是对当前的布局和组件的使用有了深刻的认识，但UI界面布局中不可能单纯只存在某个组件，复杂的UI界面中会出现多种布局、多种组件进行组合。本节我将在HarmonyOS智慧屏上实现常规的计算器。

整个计算器是将文本组件和按钮组件组合起来，然后放在一个容器中。通过监听按钮的点击事件并更改文本组件的显示内容，最终达成计算器(本节示例中遗忘了小数点，如果有兴趣的话，可以自己尝试的加上小数点)的效果。

对于计算器UI界面而言，我将其拆解为上下两部分，上区域用于显示，下区域用于按钮组。在上区域存在两个Text组件，分别用于显示数学表达式和按钮对应的数字值。下区域是一些按钮组件，数字区域，运算符号以及回退和清除。

 

对于整个示例布局我做了简单的拆解和介绍，接下来我将以代码的形式实现上面的UI界面。为了使各个布局中的组件能通过不同的占比显示，我这里选用DirectionalLayout布局，并设置它的权重比，来实现组件在不居中的占比。

1、整个布局分为上下两个区域，因此DirectionalLayout布局的方向为vertical(垂直)。并且分为两个区域，上下区域占比为2：3。

  1. <DirectionalLayout 
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.     ohos:height="match_parent" 
  4.     ohos:width="match_parent" 
  5.     ohos:orientation="vertical"> 
  6.     <DirectionalLayout 
  7.         ohos:height="match_parent" 
  8.         ohos:width="match_parent" 
  9.         ohos:weight="2" 
  10.         ohos:orientation="vertical"> 
  11.     </DirectionalLayout> 
  12.  
  13.     <DirectionalLayout 
  14.         ohos:height="match_parent" 
  15.         ohos:width="match_parent" 
  16.         ohos:weight="3" 
  17.         ohos:orientation="vertical"> 
  18.     </DirectionalLayout> 
  19. </DirectionalL 

2、上区域是两个Text组件，布局依旧是DirectionalLayout布局，两个组件在布局中的权重比为3:4。

  1. <DirectionalLayout 
  2.       ohos:height="match_parent" 
  3.       ohos:width="match_parent" 
  4.       ohos:weight="2" 
  5.       ohos:orientation="vertical"> 
  6.       <Text 
  7.           ohos:id="$+id:show_math_expression" 
  8.           ohos:height="match_parent" 
  9.           ohos:width="match_parent" 
  10.           ohos:background_element="#FFFFFF" 
  11.           ohos:weight="3" 
  12.           ohos:text="5+2+7-" 
  13.           ohos:text_size="40fp" 
  14.           ohos:text_alignment="right | vertical_center" 
  15.           ohos:right_padding="20vp"/> 
  16.       <Text 
  17.           ohos:id="$+id:show_input_value" 
  18.           ohos:height="match_parent" 
  19.           ohos:width="match_parent" 
  20.           ohos:background_element="#F2F2F2" 
  21.           ohos:weight="4" 
  22.           ohos:text="1" 
  23.           ohos:text_size="60fp" 
  24.           ohos:text_alignment="right | vertical_center" 
  25.           ohos:right_padding="20vp"/> 
  26.   </DirectionalLayout> 

3、下区域为按钮组区域，分为三部分，除了等号之外的按钮都是在各自布局中的占比为1。

  1. <DirectionalLayout 
  2.      ohos:height="match_parent" 
  3.      ohos:width="match_parent" 
  4.      ohos:weight="3" 
  5.      ohos:orientation="vertical"> 
  6.      <DirectionalLayout 
  7.          ohos:height="match_parent" 
  8.          ohos:width="match_parent" 
  9.          ohos:weight="1" 
  10.          ohos:background_element="#FFFF00" 
  11.          ohos:orientation="horizontal"> 
  12.          <Button 
  13.              ohos:height="match_parent" 
  14.              ohos:width="match_parent" 
  15.              ohos:weight="1" 
  16.              ohos:text_size="50fp" 
  17.              ohos:background_element="$graphic:background_button_style" 
  18.              ohos:text_alignment="center" 
  19.              ohos:text_color="#455A64" 
  20.              ohos:text_weight="700" 
  21.              ohos:text="7"/> 
  22.          <Button 
  23.              ohos:height="match_parent" 
  24.              ohos:width="match_parent" 
  25.              ohos:weight="1" 
  26.              ohos:text_size="50fp" 
  27.              ohos:background_element="$graphic:background_button_style" 
  28.              ohos:text_alignment="center" 
  29.              ohos:text_color="#455A64" 
  30.              ohos:text_weight="700" 
  31.              ohos:text="8"/> 
  32.          <Button 
  33.              ohos:height="match_parent" 
  34.              ohos:width="match_parent" 
  35.              ohos:weight="1" 
  36.              ohos:text_size="50fp" 
  37.              ohos:background_element="$graphic:background_button_style" 
  38.              ohos:text_alignment="center" 
  39.              ohos:text_color="#455A64" 
  40.              ohos:text_weight="700" 
  41.              ohos:text="9"/> 
  42.          <Button 
  43.              ohos:height="match_parent" 
  44.              ohos:width="match_parent" 
  45.              ohos:weight="1" 
  46.              ohos:text_size="50fp" 
  47.              ohos:background_element="$graphic:background_button_style" 
  48.              ohos:text_alignment="center" 
  49.              ohos:text="+"/> 
  50.          <Button 
  51.              ohos:height="match_parent" 
  52.              ohos:width="match_parent" 
  53.              ohos:weight="1" 
  54.              ohos:text_size="50fp" 
  55.              ohos:background_element="$graphic:background_button_style" 
  56.              ohos:text_alignment="center" 
  57.              ohos:text="-"/> 
  58.          <Image 
  59.              ohos:height="match_parent" 
  60.              ohos:width="match_parent" 
  61.              ohos:weight="1" 
  62.              ohos:background_element="$graphic:background_button_style" 
  63.              ohos:text_alignment="center" 
  64.              ohos:image_src="$media:delete"/> 
  65.      </DirectionalLayout> 
  66.      <DirectionalLayout 
  67.          ohos:height="match_parent" 
  68.          ohos:width="match_parent" 
  69.          ohos:weight="1" 
  70.          ohos:background_element="#FF00FF" 
  71.          ohos:orientation="horizontal"> 
  72.          <Button 
  73.              ohos:height="match_parent" 
  74.              ohos:width="match_parent" 
  75.              ohos:weight="1" 
  76.              ohos:text_size="50fp" 
  77.              ohos:background_element="$graphic:background_button_style" 
  78.              ohos:text_alignment="center" 
  79.              ohos:text_color="#455A64" 
  80.              ohos:text_weight="700" 
  81.              ohos:text="4"/> 
  82.          <Button 
  83.              ohos:height="match_parent" 
  84.              ohos:width="match_parent" 
  85.              ohos:weight="1" 
  86.              ohos:text_size="50fp" 
  87.              ohos:background_element="$graphic:background_button_style" 
  88.              ohos:text_alignment="center" 
  89.              ohos:text_color="#455A64" 
  90.              ohos:text_weight="700" 
  91.              ohos:text="5"/> 
  92.          <Button 
  93.              ohos:height="match_parent" 
  94.              ohos:width="match_parent" 
  95.              ohos:weight="1" 
  96.              ohos:text_size="50fp" 
  97.              ohos:background_element="$graphic:background_button_style" 
  98.              ohos:text_alignment="center" 
  99.              ohos:text_color="#455A64" 
  100.              ohos:text_weight="700" 
  101.              ohos:text="6"/> 
  102.          <Button 
  103.              ohos:height="match_parent" 
  104.              ohos:width="match_parent" 
  105.              ohos:weight="1" 
  106.              ohos:text_size="50fp" 
  107.              ohos:background_element="$graphic:background_button_style" 
  108.              ohos:text_alignment="center" 
  109.              ohos:text="*"/> 
  110.          <Button 
  111.              ohos:height="match_parent" 
  112.              ohos:width="match_parent" 
  113.              ohos:weight="1" 
  114.              ohos:text_size="50fp" 
  115.              ohos:background_element="$graphic:background_button_style" 
  116.              ohos:text_alignment="center" 
  117.              ohos:text="/"/> 
  118.          <Button 
  119.              ohos:height="match_parent" 
  120.              ohos:width="match_parent" 
  121.              ohos:weight="1" 
  122.              ohos:text_size="50fp" 
  123.              ohos:background_element="$graphic:background_button_style" 
  124.              ohos:text_alignment="center" 
  125.              ohos:text="C"/> 
  126.      </DirectionalLayout> 
  127.      <DirectionalLayout 
  128.          ohos:height="match_parent" 
  129.          ohos:width="match_parent" 
  130.          ohos:weight="1" 
  131.          ohos:background_element="#00FFFF" 
  132.          ohos:orientation="horizontal"> 
  133.          <Button 
  134.              ohos:height="match_parent" 
  135.              ohos:width="match_parent" 
  136.              ohos:weight="1" 
  137.              ohos:text_size="50fp" 
  138.              ohos:background_element="$graphic:background_button_style" 
  139.              ohos:text_alignment="center" 
  140.              ohos:text_color="#455A64" 
  141.              ohos:text_weight="700" 
  142.              ohos:text="1"/> 
  143.          <Button 
  144.              ohos:height="match_parent" 
  145.              ohos:width="match_parent" 
  146.              ohos:weight="1" 
  147.              ohos:text_size="50fp" 
  148.              ohos:background_element="$graphic:background_button_style" 
  149.              ohos:text_alignment="center" 
  150.              ohos:text_color="#455A64" 
  151.              ohos:text_weight="700" 
  152.              ohos:text="2"/> 
  153.          <Button 
  154.              ohos:height="match_parent" 
  155.              ohos:width="match_parent" 
  156.              ohos:weight="1" 
  157.              ohos:text_size="50fp" 
  158.              ohos:background_element="$graphic:background_button_style" 
  159.              ohos:text_alignment="center" 
  160.              ohos:text_color="#455A64" 
  161.              ohos:text_weight="700" 
  162.              ohos:text="3"/> 
  163.          <Button 
  164.              ohos:height="match_parent" 
  165.              ohos:width="match_parent" 
  166.              ohos:weight="1" 
  167.              ohos:text_size="50fp" 
  168.              ohos:background_element="$graphic:background_button_style" 
  169.              ohos:text_alignment="center" 
  170.              ohos:text_color="#455A64" 
  171.              ohos:text_weight="700" 
  172.              ohos:text="0"/> 
  173.          <Button 
  174.              ohos:height="match_parent" 
  175.              ohos:width="match_parent" 
  176.              ohos:weight="2" 
  177.              ohos:text_size="50fp" 
  178.              ohos:background_element="$graphic:background_button_style" 
  179.              ohos:text_alignment="center" 
  180.              ohos:text="="/> 
  181.      </DirectionalLayout> 
  182.  </DirectionalLayou 

4、预览UI布局界面

5、UI界面布局组件完成后，接下来我将实现具体的操作业务，这里仅罗列部分，详情请查阅代码。

1)首先对组件进绑定

  1. //显示表达式 
  2. private Text showMathExp = null; 
  3. //显示录入 
  4. private Text showInputValue = null; 
  5. //数字按钮7 
  6. private Button btnServe = null; 
  7.  
  8. // ... 
  9.  
  10. //回退按钮 
  11. private Image btnBack = null;  
  12.  
  13. @Override 
  14. public void onStart(Intent intent) { 
  15.     super.onStart(intent); 
  16.     super.setUIContent(ResourceTable.Layout_ability_main); 
  17.     showMathExp = (Text) findComponentById(ResourceTable.Id_show_math_expression); 
  18.     showInputValue = (Text) findComponentById(ResourceTable.Id_show_input_value); 
  19.      
  20.     //按钮 
  21.     btnServe = (Button) findComponentById(ResourceTable.Id_btn_seven); 
  22.     // ... 
  23.     //回退 
  24.     btnBack = (Image) findComponentById(ResourceTable.Id_btn_back); 
  25. } 

2)按钮的监听事件

  1. //点击按钮7的操作 
  2.        btnServe.setClickedListener(l -> { 
  3.            //TODO 现有表达式显示区是否有内容 
  4.             
  5.            //更改表达式显示区内容 
  6.            //showMathExp.setText(); 
  7.            //更改录入数字显示区内容 
  8.            showInputValue.setText(7); 
  9.        }); 

对于表达式显示区、具体运算等业务逻辑可以直接查看代码，此处不做详细赘述。

我的HarmonyOS GitHub库

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

想了解更多内容，请访问：

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz


本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Spring Boot集成JUnit5，优雅单元测试！ 下一篇：鸿蒙HarmonyOS开发板提前祝大家新年好！

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐