色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙OS開發實例:【應用狀態變量共享】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-04-03 15:09 ? 次閱讀

平時在開發的過程中,我們會在應用中共享數據,在不同的頁面間共享信息。雖然常用的共享信息,也可以通過不同頁面中組件間信息共享的方式,但有時使用應用級別的狀態管理會讓開發工作變得簡單。

根據不同的使用場景,ArkTS提供了以下幾種應用狀態管理的能力:

  • LocalStorage :使用范圍在同一頁面,頁面與卡片和頁面與UIAbility內部,負責UI狀態存儲。
  • AppStorage :運行時存儲,保存在內存中,應用范圍全局共享,提供統一的存儲供所有頁面訪問。
  • PersistentStorage :持久化存儲,保存在硬盤上,在應用退出或重啟后,數據依舊保留。

下面通過簡單的程序示例,熟悉一下這三種用法。其中示例程序中包含了以下主要文件:

image.png

一、LocalStorage

頁面級的UI狀態存儲,同一個頁面共享同一個LocalStorage,不同的頁面都可以綁定對應的LocalStorage。最常用的就是更新服務卡片和跨頁面的信息傳遞。

場景一:更新服務卡片

服務卡片中被@Entry裝飾的@Component,可以被分配一個LocalStorage實例,在組件內部,通過@LocalStorageProp裝飾器定義本地變量,并綁定到對應組件上。更新卡片時,先定義一個包含了和LocalStorageProp屬性同名的參數并放到formBindingData中,然后通過formProvider.updateForm函數,就可以更新服務卡片了。

我們要在EntryFormAbility.ets中通過傳遞LocalStorage改變服務卡片中的默認Hello的文本標簽為當前時間。

實踐步驟:前請熟悉開發文檔開發知識更新庫[docs.qq.com/doc/DUmN4VVhBd3NxdExK]

搜狗高速瀏覽器截圖20240326151344.png

1.修改服務卡片布局文件,文件開頭添加:

或者添加mau123789是v直接領
let storage = new LocalStorage();復制

并為Entry增加參數storage。

例如,WidgetCard.ets,默認:

@Entry
@Component
struct WidgetCard {
...復制

改之后:

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
...復制

2.在EntryFormAbility.ets中,用裝飾器LocalStorageProp定義本地變量,裝飾器的參數必須要和formBindingData中的屬性名稱相同。

例如,在接收方服務卡片中定義如下:

@LocalStorageProp('localprop') localValue: string = 'Hello';復制

image.png

卡片標簽默認顯示了Hello。

在發送方EntryFormAbility.ts文件的onFormEvent函數里:

onFormEvent(formId, message) {
  let date = new Date();
  let str = date.getHours().toString().padStart(2, '0') + ':' +  date.getMinutes().toString().padStart(2, '0') + ':' + date.getSeconds().toString().padStart(2, '0')
  let formData = {
    'localprop': 'Time: ' + str,
  };
  let formInfo = formBindingData.createFormBindingData(formData)
  formProvider.updateForm(formId, formInfo).then((data) = > {
    console.info('FormAbility updateForm success.' + JSON.stringify(data));
  }).catch((error) = > {
    console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
  })
}復制

formData對象里包含了名稱為localprop的鍵值,它通過formBindingData由formProvider傳遞給服務卡片,服務卡片接收到該對象后,就自動把該對象賦值給LocalStorage,相應的LocalStorageProp也自動跟著刷新。

這個動作是通過點擊卡片上的update按鈕,觸發了postCardAction事件從而調用了onFormEvent函數,執行結果如下:

image.png

場景二:跨頁面的信息傳遞

在頁面初次加載時,可以在EntryAbility.ts中傳遞一個LocalStorage對象給要打開的頁面。

我們打算在index.ets頁面加載的時候,在EntryAbility中傳遞一個包含abilitycount值為1的Storage,頁面加載后界面顯示該值。

實踐步驟:

1.在EntryAbility.ts中定義一個LocalStorage類型的變量,里面包含abilitycount屬性。

export default class EntryAbility extends UIAbility {
  storage: LocalStorage = new LocalStorage({
    'abilitycount': 1
  });復制

在onWindowStageCreate函數中,將默認的:

windowStage.loadContent('pages/Index', (err, data) = > {復制

改為傳遞參數的方式,如下:

windowStage.loadContent('pages/Index', this.storage);復制

2.在頁面端Index.ets中,文件開頭添加代碼來獲取共享的LocalStorage。

let storage = LocalStorage.GetShared()復制

在結構體內部,通過裝飾器LocalStorageProp加同樣屬性名稱作為參數,定義一個變量。

@LocalStorageProp('abilitycount') abilityCount: number = 0;復制

這樣名為abilitycount的值就通過LocalStorage傳遞到頁面了,本地默認的值0變為了傳遞過來的值1。

下圖中LocalStorage的值就是頁面打開時顯示的傳遞過來的值。

image.png

二、AppStorage

全局的UI狀態存儲,在運行時階段可以在不同的頁面間共享信息。

我們通過在Index.ets頁面創建一個變量放到AppStorage中,然后分別在First.ets頁面和Second.ets頁面訪問和修改。

實踐步驟:

1.首先在Index.ets中,通過AppStorage定義一個屬性。

AppStorage.SetOrCreate('appcount', 10);復制

然后,在組件結構體中使用StorageProp裝飾器定義一個變量,參數為之前定義的appcount屬性。

@Entry()
@Component
struct Index {

  @StorageProp('appcount') appValue: number = 0;復制

2.在First.ets頁面中,通過StorageProp定義一個appValue變量,關聯到appcount屬性上。

struct First {
  @StorageProp('appcount') appValue: number = 0;復制

在本地修改時,把用戶輸入的值寫入AppStorage,使用如下語句:

AppStorage.Set('appcount', this.textApp);復制

Second.ets頁面與First.ets頁面功能完全相同,主要顯示AppStorage在不同頁面顯示和修改的效果。

如下圖,主頁面、第一個頁面和第二個頁面初始狀態下,讀取到的AppStorage中的同一個屬性的值都是10。

image.png

在第一個頁面First.ets中把AppStorage中的屬性值改為11,我們發現在主頁面Index.ets和Second.ets中,對應的屬性值都發生了變化。

image.png

同樣,在第二個頁面Second.ets中把AppStorage中的屬性值改為12,我們發現在Index.ets和First.ets中,對應的屬性值也都變為了改后的值。

image.png

如上測試,我們發現的確可以通過AppStorage在不同頁面間共享數據。

三、PersistentStorage

持久化存儲UI狀態。保存在PersistentStorage中的數據,即使應用退出了,對應的值依然會保留,不是在內存中,而是存儲在固定存儲介質上的。

我們通過在Index.ets頁面創建一個屬性放到PersistentStorage中,然后分別在First.ets頁面和Second.ets頁面進行修改,然后再重啟應用觀察結果。

實踐步驟:

1.首先在Index.ets中,在PersistentStorage里定義一個屬性。

PersistentStorage.PersistProp('persistentcount', 100);復制

然后在組件結構體中,通過裝飾器StorageProp定義一個屬性為persistentcount的變量。

@Entry()
@Component
struct Index {
  @StorageProp('persistentcount') persistentValue: number = 0;復制

2.在First.ets頁面中,我們通過裝飾器StorageProp定義一個變量綁定persistentcount屬性。

@Entry
@Component
struct First {
  @StorageProp('persistentcount') persistentValue: number = 0;復制

通過輸入框輸入新值改變原來存儲在PersistentStorage的內容。

AppStorage.Set('persistentcount', this.textPersistent);復制

演示效果如下圖,Index.ets頁面,在初始時AppStorage和PersistentStorage中的對應屬性值分別是10和100,在First.ets頁面中,我們分別改為11和111。

image.png

關閉應用,然后重新打開,如下圖所示,AppStorage中的屬性值恢復為了10,PersistentStorage中的屬性值依舊是111,是改后的值。這證明了PersistentStorage有持續化存儲的作用。

image.png

四、總結

通過這次實踐,熟悉了不同的狀態變量在應用中的不同應用范圍,選用合適的狀態變量會讓應用開發簡單快捷,本地頁面內部使用LocalStorage保存數據,應用頁面間通過AppStorage傳遞信息,PersistentStorage可以持久化存儲數據信息。

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 變量
    +關注

    關注

    0

    文章

    613

    瀏覽量

    28360
  • 鴻蒙OS
    +關注

    關注

    0

    文章

    188

    瀏覽量

    4382
收藏 人收藏

    評論

    相關推薦

    鴻蒙開發教程-管理組件狀態

    跨組件層級雙向同步狀態是指@Provide修飾的狀態變量自動對提供者組件的所有后代組件可用,后代組件通過使用@Consume裝飾的變量來獲得對提供的狀態變量的訪問。
    的頭像 發表于 01-22 21:46 ?1320次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發</b>教程-管理組件<b class='flag-5'>狀態</b>

    HarmonyOS實踐之應用狀態變量共享

    PersistentStorage 有持續化存儲的作用。 四、總結 通過這次實踐,熟悉了不同的狀態變量在應用中的不同應用范圍,選用合適的狀態變量會讓應用開發簡單快捷,本地頁面內部使用 LocalStorage 保存數據
    發表于 12-27 09:48

    Harmony 鴻蒙頁面級變量狀態管理

    組件實例時,可以通過變量名顯式指定@State狀態變量的初始值。 示例: 在下面的示例中: 用戶定義的組件MyComponent定義了@State狀態變量count和title。如果c
    發表于 01-24 20:04

    系統的狀態變量分析

    系統的狀態變量分析:狀態變量法具有以下主要優點:(1) 可以有效地提供系統內部的信息,使人們較為容易地處理那    &
    發表于 09-10 11:38

    典型的狀態變量濾波器與兩個陷波狀態變量設計比較

    具有兩個反相積分器的狀態變量濾波器的通常示意圖是眾所周知的。奇怪的是,輸入信號幾乎總是連接到 U1 的負輸入。圖 1是一個例子IN = 1kHz,Q = 5。圖 1 典型的狀態變量濾波器該電路以其
    發表于 10-11 07:00

    OpenHarmony狀態變量更改通知:@Watch裝飾器

    @Watch應用于對狀態變量的監聽。如果開發者需要關注某個狀態變量的值是否改變,可以使用@Watch為狀態變量設置回調函數。 說明: 從API version 9開始,該裝飾器支持在A
    發表于 10-31 17:45

    動態電路的狀態變量分析

    動態電路的狀態變量分析􀂄 7.1 電路的狀態狀態變量􀂄 7.2 狀態方程及其列寫􀂄 7.3
    發表于 12-04 18:01 ?0次下載
    動態電路的<b class='flag-5'>狀態變量</b>分析

    帶通狀態變量濾波器電路圖

    帶通狀態變量濾波器電路圖
    發表于 03-30 09:10 ?866次閱讀
    帶通<b class='flag-5'>狀態變量</b>濾波器電路圖

    二階狀態變量濾波器電路圖

    二階狀態變量濾波器電路圖
    發表于 03-30 09:17 ?1036次閱讀
    二階<b class='flag-5'>狀態變量</b>濾波器電路圖

    通用狀態變量濾波器電路圖

    通用狀態變量濾波器電路圖
    發表于 03-30 09:36 ?890次閱讀
    通用<b class='flag-5'>狀態變量</b>濾波器電路圖

    狀態變量濾波器,狀態變量濾波器原理是什么?

    狀態變量濾波器,狀態變量濾波器原理是什么? 狀態變量濾波器,又稱多態變量濾波器,它可以分別從不同的點同時輸出高通、帶通、低通等,且
    發表于 03-24 14:24 ?6629次閱讀

    低失真、狀態變量式2相振蕩電路

    低失真、狀態變量式2相振蕩電路 電路的功能 用于音響設備的放大
    發表于 05-14 14:54 ?1320次閱讀
    低失真、<b class='flag-5'>狀態變量</b>式2相振蕩電路

    時域離散系統的基本網絡結構與狀態變量分析法

    關于DSP的很好的資料哦,很好的用品,比較詳細,第5章__時域離散系統的基本網絡結構與狀態變量分析法]
    發表于 12-23 11:08 ?0次下載

    使用狀態變量法研究反應式步進電動機的動特性

    本文采用了近代控制理論常用的狀態變量 法研究 了反應式步進 電動機的動特 性 , 在對步進電動機的主要參數進行了實驗測 定的基礎上 , 考慮了主要的非 線性因素 , 并在 電路方程 中分 別選 取
    發表于 11-04 08:00 ?2次下載
    使用<b class='flag-5'>狀態變量</b>法研究反應式步進電動機的動特性

    數字編程狀態變量濾波器

    狀態變量濾波器具有吸引力的一項特點是其參數(增益、截止頻率和Q)可以單獨調節。我們可以利用這種屬性以數字方式控制這些參數。
    發表于 03-22 17:43 ?2次下載
    數字編程<b class='flag-5'>狀態變量</b>濾波器
    主站蜘蛛池模板: 日本久久和电影| 国产啪精品视频网免费| 中文字幕A片视频一区二区| 午夜国产精品免费观看| 入禽太深免费观看| 日本粉嫩学生毛绒绒| 欧美性xxxx18| 免费人成在线观看网站视频| 久久精品免费观看久久| 簧片在线观看| 精品无码无人网站免费视频| 国内精自品线一区91| 国产在线精品亚洲另类| 国产亚洲精品97在线视频一| 国产午夜不卡| 国色天香社区视频免费高清3| 国产午夜精品久久理论片小说| 国产人妻人伦精品A区| 国产欧美日韩国产高清| 国产午夜伦鲁鲁| 国产在线播放不卡| 精品久久久99大香线蕉| 久久精品综合电影| 理论片午午伦夜理片2021| 蜜柚在线观看免费高清官网视频| 免费精品国偷自产在线在线| 免费无码国产欧美久久18| 欧美日韩高清一区| 色婷婷AV99XX| 西西人体一级裸片| 亚洲人成在线播放无码| 中文字幕无码他人妻味| 99久久99| 俄罗斯摘花| 国产午夜免费不卡精品理论片| 久爱在线中文在观看| 免费夜里18款禁用软粉色| 日韩精品一区二区中文| 羲义嫁密着中出交尾gvg794| 亚洲中文字幕一二三四区苍井空| 在线亚洲中文字幕36页|