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

{
  "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"
      ]
    }
  ]
}

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';

//導(dǎo)入電池信息模塊
import batteryInfo from '@ohos.batteryInfo';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want) {

    //初始化卡片所攜帶的數(shù)據(jù)
    let formData = this.getBatteryInfo()
    return formBindingData.createFormBindingData(formData);
  }

  onCastToNormalForm(formId) {

  }

  onUpdateForm(formId) {
    //更新卡片所攜帶的數(shù)據(jù)
		let data = formBindingData.createFormBindingData(this.getBatteryInfo())
    formProvider.updateForm(formId,data)
  }

  onChangeFormVisibility(newStatus) {

  }

  onFormEvent(formId, message) {

  }

  onRemoveForm(formId) {

  }

  onAcquireFormState(want) {
    return formInfo.FormState.READY;
  }

  //新聲明一個(gè)成員方法, 通過(guò)batteryInfo模塊獲取電池信息
  private getBatteryInfo(){
    return {
      'BatterySOC':batteryInfo.batterySOC,
      'BatteryTemperature':batteryInfo.batteryTemperature*0.1,
      'ChargingStatus':batteryInfo.chargingStatus,
      'BatteryHealthState':batteryInfo.BatteryHealthState
    }
  }

};

//實(shí)例化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%';

  //變量與本地?cái)?shù)據(jù)庫(kù)綁定
  @LocalStorageProp('BatterySOC') BatterySOC: number = 30
  @LocalStorageProp('BatteryTemperature') BatteryTemperature: number = 20
  @LocalStorageProp('ChargingStatus') ChargingStatus: boolean = true
  @LocalStorageProp('BatteryHealthState') BatteryHealthState: number = 1

  //用Array儲(chǔ)存批量數(shù)據(jù)
  HealthState: Array<string> = ['正常', '未知', '過(guò)熱', '過(guò)壓', '低溫', '僵死']

  build() {
    Row() {
      Column() {

        //Stack組件,使得其子組件可以層疊布局
        Stack() {

          //Progress組件用于實(shí)現(xiàn)進(jìn)度條
          Progress({
            total: 100,
            value: this.BatterySOC,
            type: ProgressType.Capsule
          })
            .width('89%')
            .height(30)
            .color(Color.Pink)

          //電量文本和充電圖標(biāo)
          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('電池狀態(tài): ' + 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
        }
      });
    })
  }
}