在鴻蒙HarmonyOS智慧屏上實現一款粗糙的計算器
作者：IT明
本節我將在HarmonyOS智慧屏上實現常規的計算器。
https://harmonyos.51cto.com/#zz
在學習的路上我們不能只是停留在對理論知識的理解，還應該將理論和實戰進行結合，這樣才有利于我們能夠更有深度的掌握知識，最終形成自己的知識體系結構。我們在實戰的時候，不僅可以鞏固我們的理論知識，還能夠在實戰中發現問題，并找到合適的解決方案。
前面的章節中我們已經學習了六大布局和常用的組件，我們在學習布局和組件的時候也有一些小示例。通過這些小示例我們僅僅是對當前的布局和組件的使用有了深刻的認識，但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>
- </DirectionalL
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>
- </DirectionalLayou
4、預覽UI布局界面
5、UI界面布局組件完成后，接下來我將實現具體的操作業務，這里僅羅列部分，詳情請查閱代碼。
1)首先對組件進綁定
- //顯示表達式
- private Text showMathExp = null;
- //顯示錄入
- private Text showInputValue = null;
- //數字按鈕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)按鈕的監聽事件
- //點擊按鈕7的操作
- btnServe.setClickedListener(l -> {
- //TODO 現有表達式顯示區是否有內容
- //更改表達式顯示區內容
- //showMathExp.setText();
- //更改錄入數字顯示區內容
- showInputValue.setText(7);
- });
對于表達式顯示區、具體運算等業務邏輯可以直接查看代碼，此處不做詳細贅述。
我的HarmonyOS GitHub庫
©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任
https://harmonyos.51cto.com/#zz
責任編輯：jianghua
來源：
鴻蒙社區
