『牛角书』基于HarmonyOS的计算器页面

@​​toc​

简介

这里分享的是我自己的鸿蒙期末考查大作业，通过一学期课程的学习，研究出来的一些成果，代码还有很多需要优化的地方，本文内容仅为利用组件形成的计算器页面。

成果展示

开发思路

计算器一般由三个组成部分，分别是计算，答案，键盘。由于本次只是利用组件进行效果展示因此计算和答案部分利用文本组件，键盘利用按钮组件来实现。

过程解析

1.创建主体框架

将主页面分成上下两个部分如下图

2计算和答案部分

在这之中同时使用两个Tex组件即可实现代码如下：

<DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:weight="2">
        <Text
            ohos:id="$+id:cal_text"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:background_element="$graphic:rect_text"
            ohos:text="$string:reminder_text_phone"
            ohos:right_padding="20vp"
            ohos:margin="2vp"
            ohos:text_alignment="right|vertical_center"
            ohos:text_size="30fp"
            ohos:weight="3"/>
        <Text
            ohos:id="$+id:num_text"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:background_element="$graphic:rect_text"
            ohos:text="$string:reminder_text_name"
            ohos:right_padding="20vp"
            ohos:margin="2vp"
            ohos:text_alignment="right|vertical_center"
            ohos:text_size="30fp"
            ohos:weight="2"/>
    </DirectionalLayout>

为了使这两个组件有区分因此在在 graphic 中新建 XML 样式，名为rect_text代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <!--  圆角弧度 -->
    <corners
        ohos:radius="60"/>
    <!-- 边框颜色和宽度-->
    <stroke
        ohos:color="#FF1F6CC8"
        ohos:width="3vp"
        />
</shape>

3.键盘部分

因为键盘有4行因此我们需要将其拆解成4个DirectionalLayout部分每个部分中拥有4个Button组件代码如下：

<DirectionalLayout
        ohos:id="$+id:num"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:weight="3">
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:alignment="center"
            ohos:margin="5vp"
            ohos:orientation="horizontal"
            ohos:padding="2vp">
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name7"
                ohos:text_size="20fp"/>
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name8"
                ohos:text_size="20fp"/>
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name9"
                ohos:text_size="20fp"/>
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name10"
                ohos:text_size="20fp"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:alignment="center"
            ohos:margin="5vp"
            ohos:orientation="horizontal"
            ohos:padding="2vp">
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name4"
                ohos:text_size="20fp"/>
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name5"
                ohos:text_size="20fp"/>
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name6"
                ohos:text_size="20fp"/>
            <Button
                ohos:height="60vp"
                ohos:width="60vp"
                ohos:background_element="$graphic:textfield_blue"
                ohos:margin="8vp"
                ohos:text="$string:reminder_text_name12"
                ohos:text_size="20fp"/>
        </DirectionalLayout>
        <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="center"
        ohos:margin="5vp"
        ohos:orientation="horizontal"
        ohos:padding="2vp">
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name1"
            ohos:text_size="20fp"/>
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name2"
            ohos:text_size="20fp"/>
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name3"
            ohos:text_size="20fp"/>
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name11"
            ohos:text_size="20fp"/>
    </DirectionalLayout>
        <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="center"
        ohos:margin="5vp"
        ohos:orientation="horizontal"
        ohos:padding="2vp">
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name0"
            ohos:text_size="20fp"/>
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name00"
            ohos:text_size="20fp"/>
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name13"
            ohos:text_size="20fp"/>
        <Button
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:background_element="$graphic:textfield_blue"
            ohos:margin="8vp"
            ohos:text="$string:reminder_text_name14"
            ohos:text_size="20fp"/>
    </DirectionalLayout>
    </DirectionalLayout>

为了区分键盘和文本的颜色因此在graphic 中新建 XML 样式，名为textfield_blue代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <!--  圆角弧度 -->
    <corners
        ohos:radius="60"/>
    <!-- 边框颜色和宽度-->
    <stroke
        ohos:color="#FFB196E5"
        ohos:width="3vp"
        />
</shape>

总结

在本次鸿蒙应用开发中由于实践的时间不足，因此在此次项目开发上有这很大的问题，我也明白我的不足，希望在接下的开发中能解决自己的问题和不足。