基于開源鴻蒙3.2R 的無人機顯控應用研究

李競擇， 范承宇， 歐陽迪

（中國兵器裝備集團自動化研究所有限公司， 四川 綿陽621000）

0 引言

鴻蒙是華為開發的一款基于微內核的分布式操作系統，旨在為全場景智能化提供統一的用戶體驗[1]。鴻蒙的設計目標是構建一個通用的、無縫的全場景操作系統，可以應用于各種設備。 與傳統操作系統相比，鴻蒙采用了分布式架構，通過分布式能力的支持實現設備間的協同工作。

開源鴻蒙提供了豐富的開發工具和開發者支持，使開發者能夠輕松構建基于鴻蒙的應用和服務。 它具有統一的開發框架和多設備適配能力， 使開發者能夠更高效地開發跨設備的應用程序。

本文在開源鴻蒙操作系統3.2R 版本下使用ArkUI開發框架實現了一個智能裝備指控系統。

1 開發環境介紹

1.1 ArkTS 開發語言

ArkUI 開發框架是方舟開發框架的簡稱， 它是一套構建開源鴻蒙操作系統應用界面的聲明式UI 開發框架，它使用極簡的UI 信息語法、豐富的UI 組件以及實時界面語言工具，幫助開發者提升應用界面開發效率30%，開發者只需要使用一套TypeScript/JavaScript API， 就能在多個開源鴻蒙設備上提供既豐富又流暢的用戶界面體驗[2]。

當前，ArkTS 是TypeScript 的超集，它在TS 的基礎上主要擴展了如下能力：

基本語法：ArkTS 開創性地定義了聲明式UI 配合ArkUI 開發框架中的系統組件及其相關的事件方法、屬性方法等共同構成了UI 開發的主體。

狀態管理：ArkTS 提供了多維度的狀態管理機制。 在UI 開發框架中，與UI 相關聯的數據可以在組件內使用，也可以在不同組件層級間傳遞，比如父子組件之間、爺孫組件之間，還可以在應用全局范圍內傳遞或跨設備傳遞。

渲染控制：ArkTS 提供了渲染控制的能力。 條件渲染（if-else）可根據應用的不同狀態，渲染對應狀態下的UI內容，常用于。 循環渲染（ForEach）可從數據源中迭代獲取數據， 并在每次迭代過程中創建相應的組件。 數據懶加載（LazyForEach）從數據源中按需迭代數據，并在每次迭代過程中創建相應的組件。

ArkTS 開發框架如圖1 所示。

圖1 ArkTS 開發框架

1.2 FA 與Stage 開發模型

開源鴻蒙應用開發可以選擇兩種開發模型， 分別是FA 模型和Stage 模型。

OpenHarmony API 8 及其更早版本的應用程序只能使用FA 模型進行開發。

Stage 模型是API9 推出后新的開發模型。 其被設計出來就是為了讓開發者能更加方便地開發出分布式環境的復雜應用，下表是Stage 模型和FA 模型的差異。

表1 FA 模型和Stage 模型對比

需要注意的是，開源鴻蒙更新至3.2Release 之后，API也更新至API9，開發者只能選擇Stage 模型進行開發。

2 軟件設計

2.1 系統實現概覽

無人機系統平臺的UI 主要由三個部分構成：無人機飛行計劃界面、無人機任務計劃界面、無人機參數調節界面。 如圖2 所示。

圖2 系統設計方案

2.2 UI 設計——主界面

主界面作為用戶點開APP 后進入的第一個界面應該是簡潔明了的。

主界面構成包括兩部分，一是屏幕正上方的功能欄，二是功能欄下方的視頻區域。 如圖3 所示。

圖3 登錄界面

用戶點擊功能欄上的按鈕后， 下方視頻界面上會出現響應功能界面。

2.3 UI 設計——飛行計劃

飛行計劃界面作為該APP 最為關鍵的一個部分，承擔了APP 的絕大部分功能，包括：小地圖顯示、 無人機當前位置信息查看和無人機飛行計劃更改及命令發送。

用戶點擊APP 上方的飛行按鍵后，該界面會由軟件下方浮現。如圖4 所示。

圖4 整體概覽

飛行計劃包括4個部分：小地圖、無人機位置信息、無人機飛行模式及速度修改和無人機命令發送。

小地圖區域包括一個地圖和一個雷達組件， 地圖目前使用二維地形圖，雷達組件為自定義組件。

2.4 無人機UI 設計——任務計劃

任務計劃界面旨在為用戶提供一個可以自定義無人機飛行計劃的區域，由3 個部分構成：無人機計劃展示、快捷鍵和勾選區域構成。

任務計劃界面如圖5 所示。

圖5 任務計劃界面

無人機計劃展示為用戶展示了無人機的經緯度信息、無人機高度信息、無人機距目標地距離等，用戶可以通過加載已有的計劃來更新這些數據， 也可以通過鍵盤輸入數據并保存。

數據展示由一個Text 組件和一個TextInput 組件組成， 通過特質的圖片和.backgroundColor 為數據讀寫區進行渲染調色，部分代碼如下所示：

按鍵包括：讀取任務計劃鍵、上傳任務計劃鍵、清除任務計劃鍵、讀取視頻流地址鍵、加載地圖文件鍵和獲取家的位置。

其中讀取、上傳、加載鍵用戶點擊后會在屏幕中間彈出一個輸入框用于輸入文件地址。 部分代碼如下所示：

勾選區域由一個地圖選擇下拉菜單和勾選項構成，下拉菜單選用自定義下來菜單，實現邏輯如圖6 所示。

圖6 下拉菜單邏輯

勾選組件由開源鴻蒙官方組件中的checkBox 實現，當用戶勾選了某個選擇框后，會觸發.onChange 事件并通過udp 通信傳遞給無人機。

2.5 無人機UI 設計——參數調節

用戶點擊功能欄后的參數調節按鍵后， 會在視頻界面上方出現一個參數調節界面用于調節無人機參數，用戶可以通過直接輸入數值來調節無人機的油門量和轉動時間，也可以通過拉動調節無人機的電機工作速率。

參數調節界面如圖7 所示。

圖7 參數調節界面

部分代碼如下所示：

3 模塊化組件

為減少主界面代碼并且方便調試， 通常將需要反復使用的組件進行模塊化處理方便調用。

本文提供了許多自定義的模塊， 希望能給廣大開發者提供一些開發思路。

3.1 自定義模塊——下拉菜單

官方提供了一個下拉組件Select 供開發者使用，但Select 可供修改的屬性較少，若開發者想自定義一個邊框則需要自己做一個下拉組件框架。

本文設計的下拉選擇模塊如圖8 所示。

圖8 自定義下拉選擇組件

下拉選擇組件的實現邏輯是：點擊下拉按鈕后出現一個下拉菜單，里面是可選擇的幾個選項，選擇后按鈕的文本變為剛剛選中的選項的文本，然后下拉菜單邊框消失。

一個下拉選擇組件應該包括的基本要素應該有：下拉按鈕本身圖片資源“selectedImage”、下拉菜單項圖片資源“optionImage”、下拉菜單文本“selectedText”、下拉菜單顯隱“optionVisible”，其他屬性包括各種邊框的寬高等屬性這里不做贅述，開發者可以根據自己的喜好進行添加。

3.2 自定義模塊——雷達

雷達是一種利用電磁波進行探測和測距的技術。 在UI 中雷達通常有一個掃描波和掃描點構成。 雷達作為軍事應用中必不可少的一環常出現于各種顯控應用中。

該模塊實現邏輯為：使用Row 組件中的.sweepGradient 屬性繪制扇形并設置漸變屬性， 同時通過.rotate 屬性配合.animation 顯式動畫來達到一個掃描的效果，部分代碼如下所示：

4 結束語

開源鴻蒙是華為對標安卓開發的一款開源操作系統，旨在為中國開發者提供一個良好的、可持續性發展的開源開發環境。

鴻蒙系統的開源是一個長期的、 持續的、 開放的過程，需要全球開發者和合作伙伴的廣泛參與和支持。目前越來越多的芯片開始適配支持開源鴻蒙， 包括但不限于RK3568、RK3588 等。

過去的鴻蒙應用開發和安卓類似，都是以Java 為主。自2023 開源鴻蒙開發者大會召開之后，鴻蒙應用開發和開源鴻蒙應用開發之間的隔閡被打破了， 開發者可以使用ArkTS 語言同時為兩款操作系統進行應用開發。

本文使用ArkTS 開發語言開發了一款無人機系統平臺， 使用ArkUI 獨有的聲明式開發方式進行了一系列創新性的組件開發， 希望為廣大ArkTS 開發者提供一些新的思路。

相信隨著未來相關技術水平的不斷提高，ArkTS 語言也會不斷進步。