HarmonyOS電量卡片
作者：木棉花_小藍
電量卡片的開發邏輯非常簡單，首先要在工程已有的模塊中新建一個ArkTS卡片；接著在卡片對應的EntryFormAbility類中編寫一個獲取電池信息的成員方法，并重寫onAddForm方法（這個方法會在卡片被創建時執行），使得formData（攜帶了設備的電池信息）經處理后傳遞給卡片頁面的本地數據庫。
介紹
本期筆者將分享一個基于ArkTS的HarmonyOS電量卡片開發案例，而案例實現的過程也是超級簡單。
開發環境要求
● DevEco Studio版本：DevEco Studio 3.1 Release
● HarmonyOS SDK版本：API version 9
工程要求
● API9
● Stage模型
正文
實現邏輯
電量卡片的開發邏輯非常簡單，首先要在工程已有的模塊中新建一個ArkTS卡片；接著在卡片對應的EntryFormAbility類中編寫一個獲取電池信息的成員方法，并重寫onAddForm方法（這個方法會在卡片被創建時執行），使得formData（攜帶了設備的電池信息）經處理后傳遞給卡片頁面的本地數據庫；最后，在卡片頁面中聲明一些變量，將它們與本地數據庫綁定，同時在UI描述中將變量所攜帶的數據（與電池信息相關）通過組件渲染出來。
代碼結構
main
├─ module.json5
├─ resources
│ ├─ zh_CN
│ ├─ rawfile
│ │ ├─ charging.png
│ │ └─ logo.png
│ ├─ en_US
│ └─ base
│ ├─ profile
│ │ ├─ form_config.json
│ │ └─ main_pages.json
│ ├─ media
│ └─ element
└─ ets
├─ widget
│ └─ pages
│ └─ WidgetCard.ets
├─ pages
│ └─ Index.ets
├─ entryformability
│ └─ EntryFormAbility.ts
└─ entryability
└─ EntryAbility.ts關鍵代碼
form_config.json：
{
"forms": [
{
"name": "widget",
"description": "This is a service widget.",
"src": "./ets/widget/pages/WidgetCard.ets",
"uiSyntax": "arkts",
"window": {
"designWidth": 720,
"autoDesignWidth": true
},
"colorMode": "auto",
"isDefault": true,
"updateEnabled": true,
"scheduledUpdateTime": "07:30",
"updateDuration": 1,
"defaultDimension": "2*2",
"supportDimensions": [
"2*2"
]
}
]
}EntryFormAbility.ts：
import formInfo from '@ohos.app.form.formInfo';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';
//導入電池信息模塊
import batteryInfo from '@ohos.batteryInfo';
export default class EntryFormAbility extends FormExtensionAbility {
onAddForm(want) {
//初始化卡片所攜帶的數據
let formData = this.getBatteryInfo()
return formBindingData.createFormBindingData(formData);
}
onCastToNormalForm(formId) {
}
onUpdateForm(formId) {
//更新卡片所攜帶的數據
let data = formBindingData.createFormBindingData(this.getBatteryInfo())
formProvider.updateForm(formId,data)
}
onChangeFormVisibility(newStatus) {
}
onFormEvent(formId, message) {
}
onRemoveForm(formId) {
}
onAcquireFormState(want) {
return formInfo.FormState.READY;
}
//新聲明一個成員方法, 通過batteryInfo模塊獲取電池信息
private getBatteryInfo(){
return {
'BatterySOC':batteryInfo.batterySOC,
'BatteryTemperature':batteryInfo.batteryTemperature*0.1,
'ChargingStatus':batteryInfo.chargingStatus,
'BatteryHealthState':batteryInfo.BatteryHealthState
}
}
};Index.ets：
//實例化LocalStorage
var Store = new LocalStorage()
@Entry(Store)
@Component
struct WidgetCard {
/*
* The title.
*/
readonly TITLE: string = 'Hello World';
/*
* The action type.
*/
readonly ACTION_TYPE: string = 'router';
/*
* The ability name.
*/
readonly ABILITY_NAME: string = 'EntryAbility';
/*
* The message.
*/
readonly MESSAGE: string = 'add detail';
/*
* The with percentage setting.
*/
readonly FULL_WIDTH_PERCENT: string = '100%';
/*
* The height percentage setting.
*/
readonly FULL_HEIGHT_PERCENT: string = '100%';
//變量與本地數據庫綁定
@LocalStorageProp('BatterySOC') BatterySOC: number = 30
@LocalStorageProp('BatteryTemperature') BatteryTemperature: number = 20
@LocalStorageProp('ChargingStatus') ChargingStatus: boolean = true
@LocalStorageProp('BatteryHealthState') BatteryHealthState: number = 1
//用Array儲存批量數據
HealthState: Array<string> = ['正常', '未知', '過熱', '過壓', '低溫', '僵死']
build() {
Row() {
Column() {
//Stack組件,使得其子組件可以層疊布局
Stack() {
//Progress組件用于實現進度條
Progress({
total: 100,
value: this.BatterySOC,
type: ProgressType.Capsule
})
.width('89%')
.height(30)
.color(Color.Pink)
//電量文本和充電圖標
Row() {
Text(this.BatterySOC + '%')
.fontSize(14)
.fontWeight(700)
if (this.ChargingStatus) {
Image($rawfile('charging.png'))
.height(20)
.width(10)
.margin({
left: 2
})
}
}
}.layoutWeight(2)
.width(this.FULL_WIDTH_PERCENT)
Row() {
//Image組件
Image($rawfile('logo.png'))
.height('60%')
.margin({
left: 6
})
.layoutWeight(2)
Column({
space: 7
}) {
Text('電池溫度: ' + this.BatteryTemperature + '℃')
.fontSize(10)
.fontWeight(700)
.margin({
top: 19
})
Text('電池狀態: ' + this.HealthState[this.BatteryHealthState])
.fontSize(10)
.fontWeight(700)
if (this.ChargingStatus) {
Text('正在充電')
.fontSize(10)
.fontWeight(700)
} else {
Text('正在耗電')
.fontSize(10)
.fontWeight(700)
}
}
.height(this.FULL_HEIGHT_PERCENT)
.layoutWeight(3)
}.layoutWeight(3)
.width(this.FULL_WIDTH_PERCENT)
}
.width(this.FULL_WIDTH_PERCENT)
}
.height(this.FULL_HEIGHT_PERCENT)
.onClick(() => {
postCardAction(this, {
"action": this.ACTION_TYPE,
"abilityName": this.ABILITY_NAME,
"params": {
"message": this.MESSAGE
}
});
})
}
}責任編輯：jianghua
來源：
51CTO 開源基礎軟件社區
