HarmonyOS鸿蒙Next中@ComponentV2页面之间的开关状态管理

HarmonyOS鸿蒙Next中@ComponentV2页面之间的开关状态管理 想实现的是HomePage里面的HomePageCheckbox1对应的checkbox和Page1里面的开关Toggle状态能对应，2也一样，两个页面都需要持久化存储（Page1的话通过点击确定持久化，HomePage直接勾选），试过了AppStorageV2，有点不会用。有没有大佬教一下？

import { HMRouter, HMRouterMgr } from "@hadss/hmrouter";
import { deviceInfo } from "@kit.BasicServicesKit";

@HMRouter({ pageUrl: "HomePage" })
[@ComponentV2](/user/ComponentV2)
export struct HomePage {

  @Local HomePageCheckbox1:boolean=true
  @Local HomePageCheckbox2:boolean=true

  aboutToAppear(): void {
  }

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Column() {
            Text('Tab1')

            CheckboxListItem({
              selectCheckbox: this.HomePageCheckbox1,
              selectCallBack:()=>{
                this.HomePageCheckbox1=!this.HomePageCheckbox1
              }
            })

            CheckboxListItem({
              selectCheckbox: this.HomePageCheckbox2,
              selectCallBack:()=>{
                this.HomePageCheckbox2=!this.HomePageCheckbox2
              }
            })

            Button('跳转Page1')
              .onClick(() => {
                HMRouterMgr.push({ pageUrl: 'Page1' })
              })
          }
          .height('100%')
          .width('100%')
        }.tabBar('Tab1')

        TabContent() {
          Column() {
            Text('Tab2')
          }
        }.tabBar('Tab2')
      }.barPosition(BarPosition.End)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

[@ComponentV2](/user/ComponentV2)
struct CheckboxListItem {
  @Param selectCheckbox: boolean = true
  @Event selectCallBack: () => void = () => {
  }

  build() {
    Row({ space: 5 }) {
      Checkbox()
        .height(20)
        .width(20)
        .select(this.selectCheckbox)
        .selectedColor(Color.Orange)
        .shape(CheckBoxShape.ROUNDED_SQUARE)
        .onChange(()=>{
          this.selectCallBack()
        })
    }
    .width("100%")
    .padding({
      left: 15,
      right: 15
    })
    .height(22.5)
  }
}

import { HMRouter, HMRouterMgr } from "@hadss/hmrouter";

@HMRouter({pageUrl:'Page1'})
[@ComponentV2](/user/ComponentV2)
export struct Page1 {
  @Local Page1Checkbox1:boolean = true
  @Local Page1Checkbox2:boolean = true
  build() {
    Column(){
      Text('Page1')
        .fontSize(70)
        .fontWeight(FontWeight.Bold)

      settingToggle({
        title: 'Checkbox1',
        SelectToggle: () => {
          this.Page1Checkbox1 = !this.Page1Checkbox1;
        },
        isOnToggle: this.Page1Checkbox1
      })

      settingToggle({
        title: 'Checkbox1',
        SelectToggle: () => {
          this.Page1Checkbox2 = !this.Page1Checkbox2;
        },
        isOnToggle: this.Page1Checkbox2
      })
      Button('确认')
        .onClick(() => {
          HMRouterMgr.pop()
        })
    }
    .width('100%')
    .height('100%')
  }
}

[@ComponentV2](/user/ComponentV2)
export struct settingToggle {
  @Param @Require title: string;
  @Param @Require isOnToggle: boolean;
  @Event SelectToggle: () => void = () => {
  }

  build() {
    Row() {
      Text(this.title)
        .fontSize(15)
        .fontColor(Color.Black)
        .textAlign(TextAlign.Start)
        .padding(5)
        .fontWeight(FontWeight.Bold)

      Toggle({ type: ToggleType.Switch, isOn: this.isOnToggle })
        .width(60)
        .height(30)
        .selectedColor('#FFC000')
        .switchPointColor(Color.White)
        .onChange(() => {
          this.SelectToggle()
        })

    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceBetween)
    .height(60)
    .padding(5)
  }
}

更多关于HarmonyOS鸿蒙Next中@ComponentV2页面之间的开关状态管理的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

hand.svg

更多关于HarmonyOS鸿蒙Next中@ComponentV2页面之间的开关状态管理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用@ComponentV2构建页面时，页面间的开关状态管理主要依赖ArkUI的响应式数据机制。通过@State、@Link或@Prop装饰器声明状态变量，可实现父子组件或兄弟组件间的状态同步与通信。例如，父组件使用@State定义状态，子组件通过@Link接收并双向绑定；若需单向传递，则使用@Prop。对于非父子关系的页面，可通过AppStorage或LocalStorage进行应用级或页面级的状态共享与管理。

在HarmonyOS Next中，要实现跨页面状态同步和持久化存储，使用AppStorageV2是正确的方案。以下是具体实现方法：

1. 定义AppStorageV2状态变量

在全局或共享文件中定义状态变量：

// 在共享文件（如GlobalState.ets）中定义
export const appStorageV2 = new AppStorageV2();

// 定义两个持久化状态
export const checkbox1State = appStorageV2.createStorage<boolean>('checkbox1', true);
export const checkbox2State = appStorageV2.createStorage<boolean>('checkbox2', true);

2. 修改HomePage使用AppStorageV2

import { checkbox1State, checkbox2State } from './GlobalState';

@HMRouter({ pageUrl: "HomePage" })
@ComponentV2
export struct HomePage {
  @Local HomePageCheckbox1: boolean = checkbox1State.get();
  @Local HomePageCheckbox2: boolean = checkbox2State.get();

  build() {
    Column() {
      // ... 其他代码保持不变
      
      CheckboxListItem({
        selectCheckbox: this.HomePageCheckbox1,
        selectCallBack: () => {
          this.HomePageCheckbox1 = !this.HomePageCheckbox1;
          checkbox1State.set(this.HomePageCheckbox1); // 持久化存储
        }
      })

      CheckboxListItem({
        selectCheckbox: this.HomePageCheckbox2,
        selectCallBack: () => {
          this.HomePageCheckbox2 = !this.HomePageCheckbox2;
          checkbox2State.set(this.HomePageCheckbox2); // 持久化存储
        }
      })
      
      // ... 其他代码
    }
  }
}

3. 修改Page1使用AppStorageV2

import { checkbox1State, checkbox2State } from './GlobalState';

@HMRouter({pageUrl:'Page1'})
@ComponentV2
export struct Page1 {
  @Local Page1Checkbox1: boolean = checkbox1State.get();
  @Local Page1Checkbox2: boolean = checkbox2State.get();
  
  build() {
    Column(){
      // ... 其他代码
      
      settingToggle({
        title: 'Checkbox1',
        SelectToggle: () => {
          this.Page1Checkbox1 = !this.Page1Checkbox1;
        },
        isOnToggle: this.Page1Checkbox1
      })

      settingToggle({
        title: 'Checkbox2', // 注意这里应该是Checkbox2
        SelectToggle: () => {
          this.Page1Checkbox2 = !this.Page1Checkbox2;
        },
        isOnToggle: this.Page1Checkbox2
      })
      
      Button('确认')
        .onClick(() => {
          // 点击确认时持久化存储
          checkbox1State.set(this.Page1Checkbox1);
          checkbox2State.set(this.Page1Checkbox2);
          HMRouterMgr.pop();
        })
    }
  }
}

4. 状态同步优化

为了实时同步状态变化，可以使用状态监听：

// 在HomePage的aboutToAppear中添加监听
aboutToAppear(): void {
  checkbox1State.onChange((value: boolean) => {
    this.HomePageCheckbox1 = value;
  });
  
  checkbox2State.onChange((value: boolean) => {
    this.HomePageCheckbox2 = value;
  });
}

关键点说明：

  1. AppStorageV2.createStorage 创建的状态会自动持久化到设备存储
  2. get() 方法获取当前值，set() 方法更新值并持久化
  3. onChange() 监听状态变化，实现实时同步
  4. Page1中点击"确认"时才持久化，符合你的需求
  5. HomePage中勾选时立即持久化

这样实现后，两个页面的开关状态会自动同步，并且数据会持久化存储，即使应用重启也会保持上次设置的状态。

回到顶部