HarmonyOS如何在文本滑动选择器弹窗 (TextPickerDialog)上添加一些自定义的UI?

HarmonyOS如何在文本滑动选择器弹窗 (TextPickerDialog)上添加一些自定义的UI?

HarmonyOS
2024-09-29 10:31:01
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

TextPickerDialog本身没有添加一些自定义ui的能力,但是可以使用CustomDialog自定弹窗来实现,CustomDialog中的builder属性是一个@CustomDialog修饰的组件,在这个组件里边使用的自定义ui和TextPickerDialog就可以了,可以参考一下:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-custom-dialog-V5

可以参考这个demo:

@Entry  
@Component  
struct TextPickerDialogExample {  
  private select: number | number[] = 0  
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']  
  @State v:string = '';  
  private customDialogController:CustomDialogController = new CustomDialogController({  
    builder:TextPickerDialogDemo({  
    }),  
    autoCancel: true,  
    alignment: DialogAlignment.Bottom,  
    customStyle: true  
  })  
  build() {  
    Row() {  
      Column() {  
        Button("TextPickerDialog:" + this.v)  
          .margin(20)  
          .onClick(() => {  
            this.customDialogController.open()  
          })  
      }.width('100%')  
    }.height('100%')  
  }  
}  
@CustomDialog  
export struct TextPickerDialogDemo{  
  controller?: CustomDialogController;  
  private select: number | number[] = 0  
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']  
  @State v:string = '';  
  aboutToAppear(): void {  
    TextPickerDialog.show({  
      range: this.fruits,  
      selected: this.select,  
      disappearTextStyle: {color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}},  
      textStyle: {color: Color.Black, font: {size: 20, weight: FontWeight.Normal}},  
      selectedTextStyle: {color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}},  
      onAccept: (value: TextPickerResult) => {  
        // 设置select为按下确定按钮时候的选中项index,这样当弹窗再次弹出时显示选中的是上一次确定的选项  
        this.select = value.index  
        console.log(this.select + '')  
        // 点击确定后,被选到的文本数据展示到页面  
        this.v = value.value as string  
        console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))  
      },  
      onCancel: () => {  
        console.info("TextPickerDialog:onCancel()")  
      },  
      onChange: (value: TextPickerResult) => {  
        console.info("TextPickerDialog:onChange()" + JSON.stringify(value))  
      }  
    })  
  }  
  build() {  
    Column(){  
      Row(){  
        Text('天数以后可以修改')  
      }  
      .width('95%')  
      .height('20%')  
      .backgroundColor(Color.Yellow)  
    }  
    .height('50%')  
    .backgroundColor(Color.Pink)  
  }  
}
分享
微博
QQ
微信
回复
2024-09-29 18:11:52
相关问题
自定义日期滑动选择器弹窗
408浏览 • 1回复 待解决
HarmonyOS 如何自定义时间选择器
51浏览 • 1回复 待解决
HarmonyOS 自定义弹窗选择
377浏览 • 1回复 待解决
如何在自定义弹窗中再次弹窗
2287浏览 • 1回复 待解决
如何在全局实现自定义dialog弹窗
2835浏览 • 1回复 待解决
如何在自定义函数中创建UI组件
1832浏览 • 1回复 待解决