HarmonyOS NEXT星河版之自定义弹窗中变量与页面变量传递

关注

原创最新推荐文章于 2026-07-24 22:26:34 发布 775 阅读 AI 写同款· GEO 优化 ›

鸿蒙HarmonyOS NEXT开发环境搭建与ArkTS实战 HarmonyOS NEXT是华为推出的新一代分布式操作系统，其核心开发语言ArkTS基于TypeScript扩展了声明式UI和状态管理能力。开发环境搭建需配置DevEco Studio IDE和HarmonyOS SDK，通过@State、@Prop等装饰器实现数据绑定，采用组件化架构提升代码复用率。在鸿蒙生态中，ArkTS面向对象特性与分布式能力结合，可高效开发跨设备应用。本文以新闻客户端为例，展示从环境配置到性能优化的全流程实践，涵盖状态管理、UI组件封装等核心开发场景，帮助开发者快速掌握Harmon 阅读详情

文章目录

1. 使用组件的状态变量传递

@CustomDialog
struct CustomDialog01 {
  @Link inputValue: string;
  controller: CustomDialogController;

  build() {
    Column() {
      Text('Change text')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })

      TextInput({ placeholder: '', text: $$this.inputValue })
        .height(60)
        .width('90%')
    }

  }
}


@Entry
@Component
struct DialogDemo01Page {
  @State inputValue: string = 'click me';
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialog01({
      inputValue: $inputValue
    })

  })

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          this.dialogController.open();
        })
        .backgroundColor(0x317aff)
    }
    .width('100%')
    .margin({ top: 5 })

  }
}

2. 方法回调

在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。

@CustomDialog
struct CustomDialog02 {
  private inputValue: string = ''
  changeInputValue: (val: string) => void = () => {}
  controller: CustomDialogController;

  build() {
    Column() {
      Text('Change text')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })

      TextInput({ placeholder: '', text: this.inputValue })
        .height(60)
        .width('90%')
        .onChange((value: string) => {
          this.changeInputValue(value);
        })
    }
  }

}

@Entry
@Component
struct DialogDemo2Page {
  @State inputValue: string = 'click me';

  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialog02({
      inputValue: this.inputValue,
      changeInputValue: (val: string) => {
        this.inputValue = val;
      }
    })
  })

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          this.dialogController.open();
        })
        .backgroundColor(0x317aff)
    }
    .width('100%')
    .margin({ top: 5 })
  }

}

3. AppStorage或LocalStorage

使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。

let storage = LocalStorage.getShared();

@CustomDialog
struct CustomDialog03 {
  @LocalStorageLink('inputVal') inputValue: string = '';
  controller: CustomDialogController;

  build() {
    Column() {
      Text('Change text')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })

      TextInput({ placeholder: '', text: this.inputValue })
        .height(60)
        .width('90%')
        .onChange((value: string) => {
          this.inputValue = value;
        })
    }
  }

}

@Entry(storage)
@Component
struct DialogDemo03 {
  @LocalStorageLink('inputVal') inputValue: string = 'click me';
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialog03()
  });

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          this.dialogController.open();
        })
        .backgroundColor(0x317aff)
    }
    .width('100%')
    .margin({ top: 5 })
  }

}