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

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

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

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

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

3.5 Row容器元件

在3.4小節中，自定義左側帶圖示的按鈕時，我們使用了Row容器元件，Row容器元件是什麼呢？
Row容器元件稱為沿水平方向佈局容器，Column容器元件是沿垂直方向佈局容器，我將兩者都稱之為線性佈局容器。
Row容器元件的用法和Column容器元件的用法類似。

@Entry
@Component
struct RowExample {
  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
      Text('橫向子元件佈局間距').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('居中對齊，預設對齊方式，可以不寫').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row({space: 4}) {
        Text('A').width('50%').height('100%')
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height('100%')
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }
      .height(50)
      .width(300)

      Text('底部對齊').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row() {
        Text('A').width('50%').height(50)
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height(60)
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }.alignItems(VerticalAlign.Bottom).width('90%').height(100)

      Text('頂部對齊').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row() {
        Text('A').width('50%').height(50)
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height(60)
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }.alignItems(VerticalAlign.Top).width('90%').height(100)
    }
    .width('100%')
    .height('100%')
  }
}
 

3.6 實現頁面跳轉

通過對容器元件、元件、裝飾器的瞭解，在3.4小節實現了標題欄區域的功能按鈕佈局，如何通過點選按鈕進入到繫結的頁面呢？本小節將繼續帶大家一起了解頁面跳轉（也稱路由跳轉）。
路由跳轉有兩種形式：通過 路由容器元件Navigator 或者 路由RouterAPI介面 來實現頁面間的跳轉。

3.6.1 Navigator路由容器元件

Navigator路由容器元件用於包裝元件，使其具備路由跳轉能力，比如包含Text文字元件並設定樣式，使其能夠提供與HTML中a標籤相似的功能。通過target和type屬性控制跳轉目標頁面及路由方式。

// navigationExample.ets
@Entry
@Component
struct NavigationExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Push}) {
        Text('跳轉到RouterApiExample頁面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Replace}) {
        Text('使用RouterApiExample頁面替換當前頁')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}

// routerExample.ets
@Entry
@Component
struct RouterApiExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Navigator({target: 'pages/simple/navigationExample', type: NavigationType.Back}) {
        Text('返回到NavigationExample頁面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}
 


說明：

  • 點選【跳轉到RouterApiExample頁面】按鈕，跳轉頁面；
  • 點選【返回NavigationExample頁面】按鈕，返回頁面；
  • 點選【使用RouterApiExample頁面替換當前頁】按鈕，跳轉頁面，銷燬當前頁，無法返回。

3.6.2 RouterAPI路由介面

API介面也提供了頁面路由功能，需要在相應的頁面引入模組，並通過元件的onClick方法進行頁面跳轉，使用需要在頁面頂部引入import router from '@system.router'。

API 描述
router.push 跳轉到應用內指定頁面，相當於Navigation元件設定type
值為NavigationType.Push
router.replace 用應用內的某個頁面替換當前頁面，並銷燬被替換的頁面，相當於Navigation元件設定type值為NavigationType.Replace
router.back 返回上一頁面或指定的頁面，相當於Navigation元件設定type值為NavigationType.Back
其他 用到再介紹 
// navigationExample.ets
import router from '@system.router';

@Entry
@Component
struct NavigationExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Navigator路由容器元件').fontSize(14).fontColor('#CCCCCC').width('90%')
      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Push}) {
        Text('跳轉到RouterApiExample頁面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Replace}) {
        Text('使用RouterApiExample頁面替換當前頁')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('返回到RouterApiExample頁面')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .onClick(() => {
          router.back({
            uri: 'pages/simple/routerApiExample'
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}
// routerApiExample.ets
import router from '@system.router';

@Entry
@Component
struct RouterApiExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('跳轉到NavigationExample頁面')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .margin({bottom: 12})
        .onClick(() => {
          router.push({
            uri: 'pages/simple/navigationExample'
          })
        })
      Text('使用NavigationExample頁面替換當前頁')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .margin({bottom: 12})
        .onClick(() => {
          router.replace({
            uri: 'pages/simple/navigationExample'
          })
        })

      Text('Navigator路由容器元件').fontSize(14).fontColor('#CCCCCC').width('90%')
      Navigator({target: 'pages/simple/navigationExample', type: NavigationType.Back}) {
        Text('返回到NavigationExample頁面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}
 

3.7 給標題欄區域按鈕新增頁面跳轉

新建science.ets（科學計算器），housingLoan.ets（房貸計算器），programmer.ets（程式設計師計算器），history.ets（歷史記錄）四個頁面。

  1. 引入routerAPI介面
import router from '@system.router'
  1. 為按鈕新增點選事件
// 在bindMenu選單元素的action中新增路由跳轉
{
  value: "科學",
  action: () => {
    router.push({uri: 'pages/science'})
  }
},
// 給右側歷史記錄按鈕新增onClick事件
.onClick(() => {
  router.push({uri: 'pages/history'})
})
 

總結

本小節對Row容器元件和路由跳轉做了簡單的介紹，下節將繼續完善我們的標準計算器。

相關推薦

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

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

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

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

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

注：轉自Tuer白曉明，原文地址：https://ost.51cto.com/posts/10723 本系列文章共有五篇，細緻描述瞭如何學習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 是一個物件,它提供了保證某個動作只被執行一次功能，最典型的場景就是單例模式。

python編寫計算器功能

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

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

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

ASP.NET Core 3.x RESTful API學習記錄--輸入驗證：IValidatableObject

需要驗證的Dto模型 繼承於IValidatableObject public class ValidatableMovie : IValidatableObject

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

vue 3.0前瞻之學習proxy

瞭解proxy Proxy是ES6新推出的一個特性，可以用它去攔截js操作的方法，從而對這些方法進行代理操作。

Vue 3 響應式原理學習

響應式原理 開篇 我們以一段程式碼為例子： <template> <img src=\"./logo.png\">

Redis-狂神（3. Redis 安裝）學習筆記

上一篇 ：2. Redis 概述 下一篇 ：4. 效能測試 文章目錄 1. Windows 下安裝 Redis2. Linux 下安裝 Redis

Neural Network 學習3 Top-k的學習例項

import tensorflow as tftf.random.set_seed(2467)# 隨機種子，我也沒搞明白是什麼玩意output = tf.random.normal([10, 6])# 模擬預測的結果，10個樣本，6類分類output = tf.math.softmax(output, axis=1)# 使得每一

VUE學習筆記—元件

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

tensorflow2.3 通過卷積神經網路_mnist資料手寫數字識別功能

1 #定義初始化和偏置 2 def weight_varibale(shape): 3# 隨機初始化權重和偏置，權重和偏置後面會跟著訓練自動優化

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

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

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

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