大主宰,盗墓笔记有声小说,官场小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

在鴻蒙HarmonyOS智慧屏上實(shí)現(xiàn)一款粗糙的計(jì)算器

[[374369]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

在學(xué)習(xí)的路上我們不能只是停留在對(duì)理論知識(shí)的理解，還應(yīng)該將理論和實(shí)戰(zhàn)進(jìn)行結(jié)合，這樣才有利于我們能夠更有深度的掌握知識(shí)，最終形成自己的知識(shí)體系結(jié)構(gòu)。我們?cè)趯?shí)戰(zhàn)的時(shí)候，不僅可以鞏固我們的理論知識(shí)，還能夠在實(shí)戰(zhàn)中發(fā)現(xiàn)問(wèn)題，并找到合適的解決方案。

前面的章節(jié)中我們已經(jīng)學(xué)習(xí)了六大布局和常用的組件，我們?cè)趯W(xué)習(xí)布局和組件的時(shí)候也有一些小示例。通過(guò)這些小示例我們僅僅是對(duì)當(dāng)前的布局和組件的使用有了深刻的認(rèn)識(shí)，但UI界面布局中不可能單純只存在某個(gè)組件，復(fù)雜的UI界面中會(huì)出現(xiàn)多種布局、多種組件進(jìn)行組合。本節(jié)我將在HarmonyOS智慧屏上實(shí)現(xiàn)常規(guī)的計(jì)算器。

整個(gè)計(jì)算器是將文本組件和按鈕組件組合起來(lái)，然后放在一個(gè)容器中。通過(guò)監(jiān)聽(tīng)按鈕的點(diǎn)擊事件并更改文本組件的顯示內(nèi)容，最終達(dá)成計(jì)算器(本節(jié)示例中遺忘了小數(shù)點(diǎn)，如果有興趣的話(huà)，可以自己嘗試的加上小數(shù)點(diǎn))的效果。

對(duì)于計(jì)算器UI界面而言，我將其拆解為上下兩部分，上區(qū)域用于顯示，下區(qū)域用于按鈕組。在上區(qū)域存在兩個(gè)Text組件，分別用于顯示數(shù)學(xué)表達(dá)式和按鈕對(duì)應(yīng)的數(shù)字值。下區(qū)域是一些按鈕組件，數(shù)字區(qū)域，運(yùn)算符號(hào)以及回退和清除。

對(duì)于整個(gè)示例布局我做了簡(jiǎn)單的拆解和介紹，接下來(lái)我將以代碼的形式實(shí)現(xiàn)上面的UI界面。為了使各個(gè)布局中的組件能通過(guò)不同的占比顯示，我這里選用DirectionalLayout布局，并設(shè)置它的權(quán)重比，來(lái)實(shí)現(xiàn)組件在不居中的占比。

1、整個(gè)布局分為上下兩個(gè)區(qū)域，因此DirectionalLayout布局的方向?yàn)関ertical(垂直)。并且分為兩個(gè)區(qū)域，上下區(qū)域占比為2：3。

 
 
 
 
  
  
  
    
  
  
  
    xmlns:ohos="http://schemas.huawei.com/res/ohos"   
  
  
      ohos:height="match_parent"   
  
  
      ohos:width="match_parent"   
  
  
      ohos:orientation="vertical">   
  
  
        
  
  
  
        ohos:height="match_parent"   
  
  
          ohos:width="match_parent"   
  
  
          ohos:weight="2"   
  
  
          ohos:orientation="vertical">   
  
  
         
  
  
     
  
  
        
  
  
  
        ohos:height="match_parent"   
  
  
          ohos:width="match_parent"   
  
  
          ohos:weight="3"   
  
  
          ohos:orientation="vertical">

2、上區(qū)域是兩個(gè)Text組件，布局依舊是DirectionalLayout布局，兩個(gè)組件在布局中的權(quán)重比為3:4。

 
 
 
 
  
  
  
    
  
  
  
      ohos:height="match_parent"   
  
  
        ohos:width="match_parent"   
  
  
        ohos:weight="2"   
  
  
        ohos:orientation="vertical">   
  
  
          
  
  
  
          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"/>   
  
  
          
  
  
  
          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"/>

3、下區(qū)域?yàn)榘粹o組區(qū)域，分為三部分，除了等號(hào)之外的按鈕都是在各自布局中的占比為1。

 
 
 
 
  
  
  
    
  
  
  
     ohos:height="match_parent"   
  
  
       ohos:width="match_parent"   
  
  
       ohos:weight="3"   
  
  
       ohos:orientation="vertical">   
  
  
         
  
  
  
         ohos:height="match_parent"   
  
  
           ohos:width="match_parent"   
  
  
           ohos:weight="1"   
  
  
           ohos:background_element="#FFFF00"   
  
  
           ohos:orientation="horizontal">   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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="+"/>   
  
  
             
  
  
  
             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="-"/>   
  
  
             
  
  
  
             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"/>   
  
  
          
  
  
         
  
  
  
         ohos:height="match_parent"   
  
  
           ohos:width="match_parent"   
  
  
           ohos:weight="1"   
  
  
           ohos:background_element="#FF00FF"   
  
  
           ohos:orientation="horizontal">   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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="*"/>   
  
  
             
  
  
  
             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="/"/>   
  
  
             
  
  
  
             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"/>   
  
  
          
  
  
         
  
  
  
         ohos:height="match_parent"   
  
  
           ohos:width="match_parent"   
  
  
           ohos:weight="1"   
  
  
           ohos:background_element="#00FFFF"   
  
  
           ohos:orientation="horizontal">   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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"/>   
  
  
             
  
  
  
             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="="/>

4、預(yù)覽UI布局界面

5、UI界面布局組件完成后，接下來(lái)我將實(shí)現(xiàn)具體的操作業(yè)務(wù)，這里僅羅列部分，詳情請(qǐng)查閱代碼。

1)首先對(duì)組件進(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)聽(tīng)事件

 
 
 
 
  
  
  
  //點(diǎ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);   
  
  
         });

對(duì)于表達(dá)式顯示區(qū)、具體運(yùn)算等業(yè)務(wù)邏輯可以直接查看代碼，此處不做詳細(xì)贅述。

我的HarmonyOS GitHub庫(kù)

?著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

網(wǎng)站欄目：在鴻蒙HarmonyOS智慧屏上實(shí)現(xiàn)一款粗糙的計(jì)算器
URL地址：http://fisionsoft.com.cn/article/djdphii.html

新聞中心

其他資訊