2. 程式人生 > 其它 >4️⃣通過編寫計算器學習ArkUI元件

4️⃣通過編寫計算器學習ArkUI元件

阿新 • • 發佈：2022-05-26

注：轉自Tuer白曉明，原文地址：https://ost.51cto.com/posts/10723

本系列文章共有五篇，細緻描述瞭如何學習ArkUI元件實現計算器的功能，以下為正文

3.8 Text元件

在前面的小節中無論是自定義按鈕還是元件示例中都用了Text元件，用於呈現一段文字資訊，描述各自的作用，Text元件是應用程式中最常見的元件。

@Entry
@Component
struct TextExample {
  build() {
    Column({space: 15}) {
      Text('多行文字的文字對齊方式').fontSize(16).fontColor('#999')
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).textAlign(TextAlign.Center).border({width: 1}).padding(8)
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件')
        .fontSize(14).textAlign(TextAlign.Start).border({width: 1}).padding(8)
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件')
        .fontSize(14).textAlign(TextAlign.End).border({width: 1}).padding(8)

      Text('設定文字超長時的顯示方式').fontSize(16).fontColor('#999')
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).textOverflow({overflow: TextOverflow.None})
        .border({width: 1}).padding(8)
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).textOverflow({overflow: TextOverflow.Clip})
        .maxLines(1).border({width: 1}).padding(8)
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).textOverflow({overflow: TextOverflow.Ellipsis})
        .maxLines(1).border({width: 1}).padding(8)

      Text('設定文字的文字行高').fontSize(16).fontColor('#999')
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).lineHeight(16).border({width: 1}).padding(8)

      Text('設定文字裝飾線及其顏色').fontSize(16).fontColor('#999')
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).decoration({type: TextDecorationType.Overline, color: Color.Blue})
        .border({width: 1}).padding(8)
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).decoration({type: TextDecorationType.Underline, color: Color.Blue})
        .border({width: 1}).padding(8)
      Text('`Text`元件，用於呈現一段文字資訊，描述各自的作用，`Text`元件是應用程式中最常見的元件。')
        .fontSize(14).decoration({type: TextDecorationType.LineThrough, color: Color.Blue})
        .border({width: 1}).padding(8)
    }
    .width('100%')
    .height('100%')
  }
}
 

3.9 標準計算器顯示區

在實戰標準計算器設計中，顯示區域是上下兩個Text元件，居上Text顯示點選功能按鈕區的錄入資訊，居下Text顯示計算結果。
 

 

      // 回顯及結果顯示區
      Flex({direction: FlexDirection.Column}) {
        Text('23+24+5').fontSize(24).fontColor('#999999')
          .textAlign(TextAlign.End)
          .width('100%')
          .height(60)
          .alignSelf(ItemAlign.Center)
          .padding({left: 10, right: 10})
        Text('52').fontSize(28).fontColor('#444444')
          .textAlign(TextAlign.End)
          .width('100%')
          .height(60)
          .alignSelf(ItemAlign.Center)
          .padding({left: 10, right: 10})
      }
      .width('100%')
      .height(120)
      .backgroundColor('#FFFFFF')
 

 

3.10 使用Column、Row容器元件、Button元件實現功能按鈕區

使用前面已經掌握的Column容器元件、Row容器元件以及Button元件實現功能按鈕區，程式碼如下：
 

      // 功能按鈕、符號按鈕、數字按鈕
      Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
        Column({space: 20}) {
          Row({space: 20}) {
            Button('MC', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('M+', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('M-', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('MR', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#7D7B7B').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
          }
          Row({space: 20}) {
            Button('C', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('÷', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('×', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('⇐', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
          }
          Row({space: 20}) {
            Button('7', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('8', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('9', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('-', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
          }
          Row({space: 20}) {
            Button('4', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('5', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('6', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
            Button('+', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(32).fontColor('#1296DB').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
          }
          Row({space: 20}) {
            Column({space: 20}) {
              Row({space: 20}) {
                Button('1', {type: ButtonType.Circle})
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
                Button('2', {type: ButtonType.Circle})
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
                Button('3', {type: ButtonType.Circle})
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
              }
              Row({space: 20}) {
                Button('%', {type: ButtonType.Circle})
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
                Button('0', {type: ButtonType.Circle})
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
                Button('.', {type: ButtonType.Circle})
                  .width(64).height(64)
                  .fontSize(32).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
              }
            }
            Column({space: 20}) {
              Button('=', {type: ButtonType.Capsule})
                .width(64).height(148)
                .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
                .backgroundColor('#FFFDFD')
                .borderRadius(32)
                .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})

            }.margin({left: -20})
          }
        }
        .padding({left: 20})
      }
      .width('100%')
      .borderRadius(8)
      .backgroundColor('#F2F2F2')
 


 
是不是看起來程式碼很多，每個Button除了內容，及個別顏色和字型大小不一樣之外，其他的都是一樣的呢？可以思考以下，如何抽出公用的自定義Button元件，根據傳參不同顯示不同的按鈕，這部分會在後面的小節中分享。學習之初先是多用，用熟了，才是靈活使用。
 

思考

在實現功能按鈕區的時候，我給Column容器元件添加了padding({left: 20})這個屬性，其代表什麼含義？解決了什麼問題？你還有沒有其他的方法？
 

小結

本節先對Text文字元件的用法做了簡單介紹，然後通過之前小節中學習的Column、Row、Button元件實現了標準計算器的功能按鈕區。下一小節將帶你一起實現標準計算器的計算功能和計算曆史留存。

相關推薦

4️⃣通過編寫計算器學習ArkUI元件

注：轉自Tuer白曉明，原文地址：https://ost.51cto.com/posts/10723 本系列文章共有五篇，細緻描述瞭如何學習ArkUI元件實現計算器的功能，以下為正文

1️⃣通過編寫計算器學習ArkUI元件

注：轉自Tuer白曉明，原文地址：https://ost.51cto.com/posts/10480 本系列文章共有五篇，細緻描述瞭如何學習ArkUI元件實現計算器的功能，以下為正文

3️⃣通過編寫計算器學習ArkUI元件

注：轉自Tuer白曉明，原文地址：https://ost.51cto.com/posts/10480 本系列文章共有五篇，細緻描述瞭如何學習ArkUI元件實現計算器的功能，以下為正文

5️⃣標準計算器學習元件完結篇

注：轉自Tuer白曉明，原文地址：https://ost.51cto.com/posts/10751 本系列文章共有五篇，細緻描述瞭如何學習ArkUI元件實現計算器的功能，以下為正文

通過 sync.Once 學習到 Go 的記憶體模型

通過 Once學習 Go 的記憶體模型 Once 官方描述 Once is an object that will perform exactly one action,即 Once 是一個物件,它提供了保證某個動作只被執行一次功能，最典型的場景就是單例模式。

? Hyperf 釋出 v1.1.4 版本，增加 Metric 監控元件

更新內容 本週更新主要為 服務監控，已接入 Prometheus StatsD 和 InfluxDB，同時我們修復了一些元件的 ?Bug，使 Hyperf 1.1.* 系列版本更加的健壯了，釋出於 1.1.4 版，建議使用 1.1 的使用者更新。

python編寫計算器功能

本文實現用python編寫一個帶介面的計算器小程式，當然這個計算器功能很簡單，只能進行一些簡單的數學運算，很適合初學者，希望能給大家帶來一些啟發

Vue學習之元件用法例項詳解

本文例項講述了Vue學習之元件用法。分享給大家供大家參考，具體如下： Vue中的模組化、可重用程式碼塊將頁面細分為一個個功能元件，而且元件之間可以巢狀。元件分為全域性元件與區域性元件，區域性元件在例項中進行註

vue內建元件component--通過is屬性動態渲染元件操作

我就廢話不多說了，大家看程式碼吧~ <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

通過jQuery 語法學習選取 HTML 元素

jQuery 語法 jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。 基礎語法：$(selector).action()

react學習之元件通訊（props,context）

　　react其元件化的思想使得元件與元件間的通訊變的十分必要，下要我們來分別介紹常見的react元件之間的通訊方式。

<pyqt5>通過小程式學習pyqt5

1.最基本的windows視窗 # coding = utf-8 import sys # QtWidgets模組包含一整套UI元件 from PyQt5.QtWidgets import QApplication, QWidget

142-Fabric開發(四) 基於Fabirc1.4.3編寫你的第一個應用

寫在前面（到到底什麼是Fabric？） 在第一節的最後，我粗略地說了說到底什麼是Fabirc。在這裡，我得再問自己一遍。到底什麼是Fabirc？我這個人比較喜歡望文生義，見文知意，顧名思義。。。找Gu爸問問，給如下結果：

166-Fabric開發(四) 基於Fabirc1.4.3編寫你的第一個應用

寫在前面（到到底什麼是Fabric？） 在第一節的最後，我粗略地說了說到底什麼是Fabirc。在這裡，我得再問自己一遍。到底什麼是Fabirc？我這個人比較喜歡望文生義，見文知意，顧名思義。。。找Gu爸問問，給如下結果：

XGBoost--4--程式碼編寫基本流程--分類

這一節主要介紹一下XGBoost演算法在CPU/GPU版本下的程式碼編寫基本流程，主要分為以下幾個部分：

VUE學習筆記—元件

在VUE中，元件是一個很重要的設計思想。為什麼會有元件，為什麼這麼設計，明白了這些才能把元件用好。

在vue中通過render函式給子元件設定ref操作

正常我們的寫法是，這樣ref不會生效，h是作用在渲染的時候的，而ref是渲染之後才建立的，因此在h函式中使用ref是無效的。

通過實際操作學習git(s上)

初始化倉庫 首先，要使用Git進行版本管理的話，必須先使用初始化倉庫。首先，使用如下命令來初始化一個倉庫。(一般來說我們要建立一個空目錄來初始化倉庫)

西瓜書4.3 編寫過程 決策樹

既然要建樹，就可以考慮使用自定義類。 然後考慮這個類需要哪些功能。首先，需要有根、葉的區分標記，然後是節點的屬性標記，

通過編寫簡易版本的虛擬DOM，來理解虛擬DOM 的原理

要構建自己的虛擬DOM，需要知道兩件事。你甚至不需要深入react的原始碼或者深入任何其他虛擬DOM實現的原始碼，因為它們是如此龐大和複雜——但實際上，虛擬DOM的主要部分只需不到50行程式碼。