HarmonyOS 3.1上實現計步卡片

本篇帖子是參考 Codelab 基于 Stage 模型 JS 服務卡片，使用最新 ArkTS 元服務開發的，實現帶有卡片的計步應用，用于介紹卡片的開發及生命周期實現。

需要完成以下功能：

消息通知欄，通知用戶今天所行走步數(行走步數是模擬的)。

元服務卡片，在桌面上添加 2x2 或 2x4 規格元服務卡片，能看到步數變化，也能看到當天所行走的進度。

關系型數據庫，用于查詢，添加用戶行走的數據。

知識點

消息通知：提供通知管理的能力，包括發布、取消發布通知，創建、獲取、移除通知通道，訂閱、取消訂閱通知，獲取通知的使能狀態、角標使能狀態，獲取通知的相關信息等。

關系型數據庫：關系型數據庫基于 SQLite 組件提供了一套完整的對本地數據庫進行管理的機制，對外提供了一系列的增、刪、改、查等接口，也可以直接運行用戶輸入的 SQL 語句來滿足復雜的場景需要。

元服務卡片開發：卡片是一種界面展示形式，可以將應用的重要信息或操作前置到卡片，以達到服務直達、減少體驗層級的目的。

卡片提供方：顯示卡片內容，控制卡片布局以及控件點擊事件。

卡片使用方：顯示卡片內容的宿主應用，控制卡片在宿主中展示的位置。

卡片管理服務：用于管理系統中所添加卡片的常駐代理服務，包括卡片對象的管理與使用，以及卡片周期性刷新等。

軟件要求：

DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。

HarmonyOS SDK版本：API version 9及以上版本。

硬件要求：

設備類型：華為手機 3.1 系統或運行在 DevEco Studio 上的遠程模擬器 API9。

HarmonyOS 系統：3.1.0 DeveloperRelease 及以上版本。

講解

卡片更新邏輯和Codelabs是一樣的，詳情可以移步到 Stage 模型卡片（ArkTS）細看，這里主要講解一下 ArKTS 開發服務卡片。

Codelabs 開發的是 JS 服務卡片，還有在把這個 JS 卡片改為用 ArkTS 過程中，需要注意的地方：

①使用關系型數據庫時，Codelabs 與使用最新版本 API 不同之處：

Codelabs 源碼：

awaitDataRdb.getRdbStore(context,CommonConstants.RDB_STORE_CONFIG)
.then((rdbStore:DataRdb.RdbStore)=>{

awaitDataRdb.getRdbStore(context,CommonConstants.RDB_STORE_CONFIG)
.then((rdbStore)=>{

②使用 Chart 組件和 Polyline 組件：

在 JS 服務卡片可以使用 Chart 組件來生成曲線圖表：

在 ArkTS 服務卡片，使用不了 Chart 組件，用 Polyline 組件來代替：

Polyline().width('100%').height('100%').points(this.setPolyLine(this.datasets))

③默認 EntryAbility.ts 和 EntryFormAbility.ts 兩個文件的后輟都是 ts 的，其他文件后輟是 ets 的，當想在這兩個文件 import 其它文件時，提示以下信息，于是我把這兩個文件后輟都改為 ets 了。

ImportingArkTSfilestoJSandTSfilesisnotallowed.

④服務卡片如何接收更新數據，卡片頁面如何接收，后臺如何更新。

卡片頁面如何接收，比如步數參數如何定義：

letstorage=newLocalStorage();

@Entry(storage)
@Component
structWidgetCard{
@LocalStorageProp('steps')steps:number=0;

后臺如何更新：

//創建卡片
letformData:FormData=newFormData();
formData.percent=0;
formData.steps=0;
returnFormBindingData.createFormBindingData(formData);
//更新卡片
FormProvider.updateForm(formData.formId,FormBindingData.createFormBindingData(formData))

2x2 卡片界面部分代碼：

Stack(){
Image($r("app.media.icon_2x2_card_background"))
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.objectFit(ImageFit.Cover)

Progress({value:this.percent,total:100,type:ProgressType.Ring}).width(100).height(100)
.color(Color.White)//進度條前景色為灰色
.style({strokeWidth:12})//設置strokeWidth進度條寬度為12vp
Column(){
Text('步數')
.fontSize(10)
.fontColor($r('app.color.text_font_color'))
Text(this.steps.toString())
.fontSize(26)
.fontColor($r('app.color.text_font_color'))
Text('步')
.fontSize(10)
.fontColor($r('app.color.text_font_color'))
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.padding($r('app.float.column_padding'))
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.onClick(()=>{
postCardAction(this,{
"action":"router",
"abilityName":"EntryAbility",
"params":{
"message":"adddetail"
}
});
})

2x4 卡片界面部分代碼：

Stack(){
Image($r("app.media.icon_2x4_card_background"))
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.objectFit(ImageFit.Cover)
Row(){
Column(){
Text(`今天走了${this.mileage}米`)
.fontSize(16)
.fontWeight(400)
.opacity(0.9)
.fontColor($r('app.color.text_font_color'))
Row(){
Text(this.steps.toString())
.fontSize(40)
.fontWeight(700)
.fontColor($r('app.color.text_font_color'))
Text('步')
.fontSize(16)
.fontWeight(400)
.opacity(0.9)
.fontColor($r('app.color.text_font_color'))
.margin({left:5,bottom:-10})
}
.margin({top:10,bottom:10})
Text(`${this.percent}%`)
.fontSize(16)
.fontWeight(400)
.fontColor($r('app.color.text_font_color'))
Progress({value:this.percent,total:100,type:ProgressType.Linear})
.color('#FFFFFF')
.backgroundColor('#40FFFFFF')
.style({strokeWidth:6})
.margin({top:4})
}
.width('50%')
.height(this.FULL_HEIGHT_PERCENT)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center)
.padding($r('app.float.column_padding'))
Column(){
Polyline()
.width('100%').height('100%')
.points(this.setPolyLine(this.datasets))
.strokeDashOffset(-50)
.fillOpacity(0)
.strokeOpacity(0.5)
.stroke(Color.White)
.strokeWidth(3)
//設置折線拐角處為圓弧
.strokeLineJoin(LineJoinStyle.Round)
//設置折線兩端為半圓
.strokeLineCap(LineCapStyle.Round)
}
.width('50%')
}

}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)

總結

通過學習 Cabelabs 案例，我們可以快速學到實踐知識，通過查看文檔指南，我們可以了解到更細的知識點。

當我們腦子里有了一個應用的模型，所以通過 Codelabs 相似案例知識點，加上查看文檔指南、API 參考，平常多看和參加學堂視頻課程，有了一定的知識量，做項目或回答一些問題，就是這么簡單了。

審核編輯：湯梓紅