在鴻蒙HarmonyOS智慧屏上實現(xiàn)一款粗糙的計算器
作者：IT明
本節(jié)我將在HarmonyOS智慧屏上實現(xiàn)常規(guī)的計算器。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
在學(xué)習(xí)的路上我們不能只是停留在對理論知識的理解，還應(yīng)該將理論和實戰(zhàn)進(jìn)行結(jié)合，這樣才有利于我們能夠更有深度的掌握知識，最終形成自己的知識體系結(jié)構(gòu)。我們在實戰(zhàn)的時候，不僅可以鞏固我們的理論知識，還能夠在實戰(zhàn)中發(fā)現(xiàn)問題，并找到合適的解決方案。
前面的章節(jié)中我們已經(jīng)學(xué)習(xí)了六大布局和常用的組件，我們在學(xué)習(xí)布局和組件的時候也有一些小示例。通過這些小示例我們僅僅是對當(dāng)前的布局和組件的使用有了深刻的認(rèn)識，但UI界面布局中不可能單純只存在某個組件，復(fù)雜的UI界面中會出現(xiàn)多種布局、多種組件進(jìn)行組合。本節(jié)我將在HarmonyOS智慧屏上實現(xiàn)常規(guī)的計算器。
整個計算器是將文本組件和按鈕組件組合起來，然后放在一個容器中。通過監(jiān)聽按鈕的點擊事件并更改文本組件的顯示內(nèi)容，最終達(dá)成計算器(本節(jié)示例中遺忘了小數(shù)點，如果有興趣的話，可以自己嘗試的加上小數(shù)點)的效果。
對于計算器UI界面而言，我將其拆解為上下兩部分，上區(qū)域用于顯示，下區(qū)域用于按鈕組。在上區(qū)域存在兩個Text組件，分別用于顯示數(shù)學(xué)表達(dá)式和按鈕對應(yīng)的數(shù)字值。下區(qū)域是一些按鈕組件，數(shù)字區(qū)域，運算符號以及回退和清除。
對于整個示例布局我做了簡單的拆解和介紹，接下來我將以代碼的形式實現(xiàn)上面的UI界面。為了使各個布局中的組件能通過不同的占比顯示，我這里選用DirectionalLayout布局，并設(shè)置它的權(quán)重比，來實現(xiàn)組件在不居中的占比。
1、整個布局分為上下兩個區(qū)域，因此DirectionalLayout布局的方向為vertical(垂直)。并且分為兩個區(qū)域，上下區(qū)域占比為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>
- </DirectionalL
2、上區(qū)域是兩個Text組件，布局依舊是DirectionalLayout布局，兩個組件在布局中的權(quán)重比為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、下區(qū)域為按鈕組區(qū)域，分為三部分，除了等號之外的按鈕都是在各自布局中的占比為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>
- </DirectionalLayou
4、預(yù)覽UI布局界面
5、UI界面布局組件完成后，接下來我將實現(xiàn)具體的操作業(yè)務(wù)，這里僅羅列部分，詳情請查閱代碼。
1)首先對組件進(jìn)綁定
- //顯示表達(dá)式
- private Text showMathExp = null;
- //顯示錄入
- private Text showInputValue = null;
- //數(shù)字按鈕7
- private Button btnServe = null;
- // ...
- //回退按鈕
- private Image btnBack = null;
- @Override
- public void onStart(Intent intent) {
- super.onStart(intent);
- super.setUIContent(ResourceTable.Layout_ability_main);
- showMathExp = (Text) findComponentById(ResourceTable.Id_show_math_expression);
- showInputValue = (Text) findComponentById(ResourceTable.Id_show_input_value);
- //按鈕
- btnServe = (Button) findComponentById(ResourceTable.Id_btn_seven);
- // ...
- //回退
- btnBack = (Image) findComponentById(ResourceTable.Id_btn_back);
- }
2)按鈕的監(jiān)聽事件
- //點擊按鈕7的操作
- btnServe.setClickedListener(l -> {
- //TODO 現(xiàn)有表達(dá)式顯示區(qū)是否有內(nèi)容
- //更改表達(dá)式顯示區(qū)內(nèi)容
- //showMathExp.setText();
- //更改錄入數(shù)字顯示區(qū)內(nèi)容
- showInputValue.setText(7);
- });
對于表達(dá)式顯示區(qū)、具體運算等業(yè)務(wù)邏輯可以直接查看代碼，此處不做詳細(xì)贅述。
我的HarmonyOS GitHub庫
©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
責(zé)任編輯：jianghua
來源：
鴻蒙社區(qū)
