《 HarmonyOS实战—可搭载在车机大屏智能手表平板电脑手机的计算器它来啦！》

Posted 宾有为

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《 HarmonyOS实战—可搭载在车机大屏智能手表平板电脑手机的计算器它来啦！》相关的知识，希望对你有一定的参考价值。

这是一款可搭载在车机、大屏、智能手表、平板电脑、手机的计算器

【本文正在参与“有奖征文 | HarmonyOS征文大赛”活动】

目录

布局的实现

Layout_ability_main.xml布局：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <TextField
        ohos:id="$+id:content"
        ohos:height="0vp"
        ohos:weight="1"
        ohos:width="match_parent"
        ohos:enabled="false"
        ohos:padding="20vp"
        ohos:text="0"
        ohos:text_alignment="center"
        ohos:text_size="30"/>

    <ScrollView
        ohos:height="0vp"
        ohos:weight="1.8"
        ohos:width="match_parent">

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:alignment="horizontal_center"
            ohos:orientation="vertical">

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">

                <Button
                    ohos:id="$+id:reset"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="c"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:except"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="÷"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:ride"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="x"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:delete"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="←"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

            </DirectionalLayout>

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">

                <Button
                    ohos:id="$+id:seven"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="7"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:eight"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="8"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:nine"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="9"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:reduce"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="-"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

            </DirectionalLayout>

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">

                <Button
                    ohos:id="$+id:four"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="4"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:five"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="5"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:six"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="6"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:add"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="+"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

            </DirectionalLayout>

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">

                <Button
                    ohos:id="$+id:one"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="1"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:two"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="2"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:three"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button1"
                    ohos:margin="6vp"
                    ohos:text="3"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:decimal_point"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="."
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

            </DirectionalLayout>

            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">


                <Button
                    ohos:id="$+id:percentage"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="％"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:zero"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button2"
                    ohos:margin="6vp"
                    ohos:text="0"
                    ohos:text_size="30vp"
                    ohos:weight="1"/>

                <Button
                    ohos:id="$+id:equal"
                    ohos:height="70vp"
                    ohos:width="0vp"
                    ohos:background_element="$graphic:background_button3"
                    ohos:margin="6vp"
                    ohos:text="="
                    ohos:text_size="30vp"
                    ohos:weight="2"/>

            </DirectionalLayout>

        </DirectionalLayout>
    </ScrollView>
</DirectionalLayout>

background_button1.xml背景样式：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid ohos:color="#CCF1F1F1"/>
    <corners ohos:radius="20vp"/>
</shape>

background_button2.xml背景样式：

<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid ohos:color="#FFE4F2FE"/>
    <corners ohos:radius="20vp"/>
</shape>

background_button3.xml背景样式：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid ohos:color="#FF007CFD"/>
    HarmonyOS 2体验：熟悉的味道，革新的操作感受


 HarmonyOS实战[一]——原理概念介绍安装：基础篇


 极光开发者周刊No.0604


 HarmonyOS入门第一课:初识HarmonyOS


 HarmonyOS实战[三]—可编辑的卡片交互


 仪表和中控车机GUI界面开发工具介绍