#2020征文-TV# 在智慧屏上实现一款粗糙的计算器-低调大师

#2020征文-TV# 在智慧屏上实现一款粗糙的计算器

2021-01-04 419

目录：

1、整个布局分为上下两个区域

2、上区域是两个Text组件

3、下区域为按钮组区域，分为三部分

4、预览UI布局界面

5、实现具体的操作业务

6、源代码包

这个世界就是这样，好马配好鞍，好船配好帆，***（和谐），没有太大意外的情况下，万物都会自然归位，感谢我的伯乐和船们。

引自：韩寒《告白与告别》

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

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

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

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

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

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

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:weight="2"
        ohos:orientation="vertical">
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:weight="3"
        ohos:orientation="vertical">
    </DirectionalLayout>
</DirectionalLayout>

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

    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:weight="2"
        ohos:orientation="vertical">
        <Text
            ohos:id="$+id:show_math_expression"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:background_element="#FFFFFF"
            ohos:weight="3"
            ohos:text="5+2+7-"
            ohos:text_size="40fp"
            ohos:text_alignment="right | vertical_center"
            ohos:right_padding="20vp"/>
        <Text
            ohos:id="$+id:show_input_value"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:background_element="#F2F2F2"
            ohos:weight="4"
            ohos:text="1"
            ohos:text_size="60fp"
            ohos:text_alignment="right | vertical_center"
            ohos:right_padding="20vp"/>
    </DirectionalLayout>

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

    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:weight="3"
        ohos:orientation="vertical">
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:background_element="#FFFF00"
            ohos:orientation="horizontal">
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="7"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="8"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="9"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text="+"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text="-"/>
            <Image
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:image_src="$media:delete"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:background_element="#FF00FF"
            ohos:orientation="horizontal">
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="4"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="5"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="6"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text="*"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text="/"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text="C"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:background_element="#00FFFF"
            ohos:orientation="horizontal">
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="1"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="2"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="3"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text_color="#455A64"
                ohos:text_weight="700"
                ohos:text="0"/>
            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="2"
                ohos:text_size="50fp"
                ohos:background_element="$graphic:background_button_style"
                ohos:text_alignment="center"
                ohos:text="="/>
        </DirectionalLayout>
    </DirectionalLayout>

查看更多章节>>>

作者：IT明

想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/

微信关注我们

原文链接：https://my.oschina.net/u/4857646/blog/4874997

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

漫画 | 如何向外行解释产品经理频繁更改需求会令程序员很焦灼？

点击上方“蓝色字体”，选择“设为星标” 第一时间收到漫画更新！众所周知，程序员是一类思维比较特殊的群体，但他们也有不为人知的烦恼，最常见的是经常被产品经理频繁改需求、拿老板来压人等...，而这些烦恼外行人是很难理解的. 就像前些年就出现过“软件公司老板被员工用显示器砸脸”的新闻，而老板被采访时的回答是：“我就是让程序员再改一下需求...”，但真的仅仅只是再让改一次这么简单吗？今天这篇漫画用一个日常生活中很常见的例子来讲述产品经理频繁更改需求，为什么会令程序员烦恼的故事，一起来看看吧，是否有戳中你的泪点？本期漫画改编自知乎万赞问答，已获改编授权. 情节纯属虚构，如有雷同，纯属巧合.. 编后你 = 客户服务员 = 客户经理 + 产品经理大厨 = 码农请自行转换... 本文纯属虚构，情节如有雷同，纯属巧合，现实生产生活中码农和PM还是和睦友好的相亲相爱的一家人！仅以此篇漫画献给漫漫编程路中，不易的你 —— 程序员参考资料 # 如何向外行解释产品经理频繁更改需求为什么会令程序员烦恼? https://www.zhihu.com/question/40712955/an...

2021-01-04

542

本文来自Rancher Labs 在过去的文章中，我们花了相当大的篇幅来聊关于监控的话题。这是因为当你正在管理Kubernetes集群时，一切都会以极快的速度发生变化。因此有一个工具来监控集群的健康状态和资源指标极为重要。在Rancher 2.5中，我们引入了基于Prometheus Operator的新版监控，它可以提供Prometheus以及相关监控组件的原生Kubernetes部署和管理。Prometheus Operator可以让你监控集群节点、Kubernetes组件和应用程序工作负载的状态和进程。同时，它还能够通过Prometheus收集的指标来定义告警并且创建自定义仪表盘，通过Grafana可以轻松地可视化收集到的指标。你可以访问下列链接获取更多关于新版监控组件的细节： https://rancher.com/docs/rancher/v2.x/en/monitoring-alerting/v2.5/ 新版本的监控也采用prometheus-adapter，开发人员可以利用其基于自定义指标和HPA扩展他们的工作负载。在本文中，我们将探索如何利用Prometheus O...

2021-01-04

670

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。