HarmonyOS鸿蒙Next中使用@StorageProp实现本地持久化开关状态

HarmonyOS鸿蒙Next中使用@StorageProp实现本地持久化开关状态 在某些情况下，比如用户想进行模式的切换，当打开“深色模式”后，但是当App 重启又变回浅色模式，这时候我就需要使用一些本地持久化的工具来进行处理了，如何处理呢？

3 回复

思路

想要实现这种本地化的存储其实方法挺多，我们今天采用一种@StorageProp 来进行实现，

@StorageProp他的核心是实现与AppStorage建立的是单向数据同步，AppStorage的数据更新会同步到StorageProp中，StorageProp的数据更新不会同步到AppStorage。

所以我们使用@StorageProp来对数据进行存储，这样就确保在重启应用后存储数据依然有效。

初始化规则图

完整代码

@Entry
@Component
struct Main {
  //  关键：[@StorageProp](/user/StorageProp)('darkMode') 自动持久化到本地
  [@StorageProp](/user/StorageProp)('darkMode')
  private darkMode: boolean = false; // 默认值仅首次启动时生效

  build() {
    Column({ space: 30 }) {
      Text('深色模式设置')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Row({ space: 10 }) {
        Text('启用深色主题')
        Toggle({
          isOn: this.darkMode,
          type: ToggleType.Checkbox
        })
          .onChange((value: boolean) => {
            this.darkMode = value; // 自动保存到本地！
          })
      }

      // 根据开关状态动态切换背景色
      Blank()
        .backgroundColor(this.darkMode ? '#121212' : Color.Brown)
        .width('100%')
        .height(500)
        .margin({ top: 20 })
        .borderRadius(8)
    }
    .width('100%')
    .padding(30)
    // .backgroundColor(this.darkMode ? '#1e1e1e' : Color.Brown)
  }
}

实现效果

可进行主题色彩的变更，当重启app后同样生效。

更多关于HarmonyOS鸿蒙Next中使用@StorageProp实现本地持久化开关状态的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用@StorageProp装饰器可将开关状态持久化到本地。@StorageProp与AppStorage中的属性建立单向同步，当AppStorage中的对应属性值改变时，装饰的变量会自动更新。此装饰变量为本地初始化，修改仅对当前组件生效，不会同步回AppStorage。适用于需要将UI状态持久化，且变更不反向影响应用全局状态的场景。

在HarmonyOS Next中，使用[@StorageProp](/user/StorageProp)装饰器是实现应用内开关状态持久化的推荐方案。它能够自动将自定义组件的特定属性同步到应用内的持久化存储（AppStorage），并在应用重启后恢复数据。

针对你“深色模式”开关的场景，核心步骤如下：

  1. 定义存储键与默认值：在AppStorage中定义一个键（例如'DarkMode'），并设置其默认值（例如false代表浅色模式）。

    // 在应用的入口或合适位置初始化，确保在组件使用前执行
AppStorage.setOrCreate<boolean>('DarkMode', false);

  2. 在UI组件中使用@StorageProp：在需要控制或显示模式的组件中，使用[@StorageProp](/user/StorageProp)装饰器链接一个组件变量到AppStorage的对应键。

    import { StorageProp } from '@kit.ArkUI';

@Component
struct ModeSwitchComponent {
  // 将组件内的darkMode变量与AppStorage中的'DarkMode'绑定
  // 本地初始化值会使用AppStorage中的值
  [@StorageProp](/user/StorageProp)('DarkMode') darkMode: boolean = false;

  build() {
    // 构建UI，例如一个切换开关
    Toggle({ type: ToggleType.Switch, isOn: this.darkMode })
      .onChange((isOn: boolean) => {
        // 当开关切换时，直接赋值给this.darkMode
        // [@StorageProp](/user/StorageProp)装饰的变量赋值会同步更新AppStorage
        this.darkMode = isOn;
        // 此处可以根据isOn的值，同时应用深色/浅色主题
      })
  }
}

  3. 状态同步与持久化：

    • 写入：当用户切换Toggle开关时，onChange事件中执行的this.darkMode = isOn;会同时更新组件状态和AppStorage中的持久化值。
    • 读取：应用下次启动时，AppStorage会自动加载之前保存的数据。组件初始化[@StorageProp](/user/StorageProp)('DarkMode') darkMode: boolean时，会自动从AppStorage中读取'DarkMode'键存储的值，并赋给darkMode变量，从而恢复用户上次的设置。

关键特性说明：

  • [@StorageProp](/user/StorageProp)装饰的变量是单向同步的：从AppStorage到组件变量。在组件内对其赋值会直接写回AppStorage，但AppStorage中的更改（例如其他组件修改）也会自动同步到所有绑定此键的组件变量，触发UI更新。
  • 持久化范围是应用内，数据存储在应用沙箱内，卸载应用会被清除。
  • 此方案适用于开关、简单的配置项等轻量数据。对于更复杂的数据结构或需要跨设备同步的场景，可考虑使用@StorageLink或Preferences持久化API。

按照以上方法，你的深色模式开关状态在应用重启后即可保持不变。

回到顶部