鸿蒙自定义弹窗中的变量如何传递给页面
作者：坚果
团队：坚果派
公众号：“大前端之旅”团队介绍：坚果派由坚果创建，团队拥有8个华为HDE，3个HSD，以及若干其他领域的三十余位万粉博主运营。
本人为华为HDE、中国计算机学会CCF专业会员、OpenHarmony布道师、开发者联盟优秀讲师、2023年开源之夏导师、2023年OpenHarmony应用创新赛导师、RISC-V+OpenHarmony应用创意赛导师、OpenHarmony三方库贡献者、开放原子开源基金会技术+生态贡献者第一批开放原子开源讲师、OpenHarmony校源行开源大使、InfoQ签约作者、CSDN博客专家、电子发烧友MVP、51CTO博客专家博主、阿里云博客专家、曾受邀参加2022，2023HDC大会。专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，在2022年战码活动中，带领100余人完成pr的提交，配合孵化三个小队长。也在此活动中累计完成1.5W行代码提交，以及在2023年OpenHarmony创新赛中。累计辅导60+队伍，完成作品的提交,在相关社区累计发布OpenHarmony相关技术文章/视频50+，获得20w+浏览量。团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，欢迎合作。
- 方式一：使用组件的状态变量传递。
- 方式二：在初始化弹窗时，传递一个方法给自定义弹窗。
- 方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享。
方式一：使用组件的状态变量传递。
@CustomDialog export 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%') .onChange((value: string) => { this.inputValue = value }) } } }
@Entry @Component struct DialogDemo01 { @State inputValue: string = 'click me' dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialog01({ inputValue: $inputValue }) })
build() { Column() { Button(this.inputValue).fontSize(30) .onClick(() => { this.dialogController.open() }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }).height("100%").justifyContent(FlexAlign.Center) } }
方式二：在初始化弹窗时，传递一个方法给自定义弹窗，在自定义弹窗中触发该方法，弹窗中变量作为方法的参数。
@CustomDialog export struct CustomDialog01 { 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 DialogDemo01 { @State inputValue: string = 'click me' dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialog01({ inputValue: this.inputValue, changeInputValue: (val: string) => { this.inputValue = val } }) })
build() { Column() { Button(this.inputValue).fontSize(30) .onClick(() => { this.dialogController.open() }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }).height("100%").justifyContent(FlexAlign.Center) } }
方式三：使用AppStorage或LocalStorage方式管理页面状态，实现自定义弹窗和页面之间状态的共享
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
