#2020徵文-TV# 在智慧屏上實現一款粗糙的計算器

目錄：express

這個世界就是這樣，好馬配好鞍，好船配好帆，***（和諧），沒有太大意外的狀況下，萬物都會天然歸位，感謝個人伯樂和船們。3d

引自：韓寒《告白與告別》code

在學習的路上咱們不能只是停留在對理論知識的理解，還應該將理論和實戰進行結合，這樣纔有利於咱們可以更有深度的掌握知識，最終造成本身的知識體系結構。咱們在實戰的時候，不只能夠鞏固咱們的理論知識，還可以在實戰中發現問題，並找到合適的解決方案。xml

前面的章節中咱們已經學習了六大布局和經常使用的組件，咱們在學習佈局和組件的時候也有一些小示例。經過這些小示例咱們僅僅是對當前的佈局和組件的使用有了深入的認識，但UI界面佈局中不可能單純只存在某個組件，複雜的UI界面中會出現多種佈局、多種組件進行組合。本節我將在HarmonyOS智慧屏上實現常規的計算器。

整個計算器是將文本組件和按鈕組件組合起來，而後放在一個容器中。經過監聽按鈕的點擊事件並更改文本組件的顯示內容，最終達成計算器（本節示例中遺忘了小數點，若是有興趣的話，能夠本身嘗試的加上小數點）的效果。

對於計算器UI界面而言，我將其拆解爲上下兩部分，上區域用於顯示，下區域用於按鈕組。在上區域存在兩個Text組件，分別用於顯示數學表達式和按鈕對應的數字值。下區域是一些按鈕組件，數字區域，運算符號以及回退和清除。

對於整個示例佈局我作了簡單的拆解和介紹，接下來我將以代碼的形式實現上面的UI界面。爲了使各個佈局中的組件能經過不一樣的佔比顯示，我這裏選用DirectionalLayout佈局，並設置它的權重比，來實現組件在不居中的佔比。

一、整個佈局分爲上下兩個區域，所以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>

二、上區域是兩個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>

三、下區域爲按鈕組區域，分爲三部分，除了等號以外的按鈕都是在各自佈局中的佔比爲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/