鴻蒙自定義彈窗中的變量如何傳遞給頁面
方式一：使用組件的狀態(tài)變量傳遞。
方式二：在初始化彈窗時，傳遞一個方法給自定義彈窗。
方式三：使用AppStorage或LocalStorage方式管理頁面狀態(tài)，實現(xiàn)自定義彈窗和頁面之間狀態(tài)的共享。
方式一：使用組件的狀態(tài)變量傳遞。
@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)
? }
}
方式二：在初始化彈窗時，傳遞一個方法給自定義彈窗，在自定義彈窗中觸發(fā)該方法，彈窗中變量作為方法的參數(shù)。
@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方式管理頁面狀態(tài)，實現(xiàn)自定義彈窗和頁面之間狀態(tài)的共享
let storage = LocalStorage.GetShared()
@CustomDialog
export? struct CustomDialog01 {
? @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 DialogDemo01 {
? @LocalStorageLink('inputVal') inputValue: string = '點擊'
? dialogController: CustomDialogController = new CustomDialogController({
? ? builder: CustomDialog01()
? })
? build() {
? ? Column() {
? ? ? Button(this.inputValue)
? ? ? ? .onClick(() => {
? ? ? ? ? this.dialogController.open()
? ? ? ? }).backgroundColor(0x317aff)
? ? }.width('100%').margin({ top: 5 })
? }
}
以上就是 自定義彈窗中的變量如何傳遞給頁面的三種辦法。
鴻蒙自定義彈窗中的變量如何傳遞給頁面
https://blog.51cto.com/jianguo/9057664
