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)  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
分享
微博
QQ
微信
回复
2024-09-29 18:11:52
相关问题
自定义日期滑动选择器弹窗
1084浏览 • 1回复 待解决
HarmonyOS 如何自定义时间选择器
790浏览 • 1回复 待解决
HarmonyOS 自定义弹窗如何更新弹窗UI
874浏览 • 1回复 待解决
HarmonyOS 自定义弹窗选择
1306浏览 • 1回复 待解决
HarmonyOS 地图组件如何添加自定义UI
567浏览 • 1回复 待解决
如何在自定义弹窗中再次弹窗
3206浏览 • 1回复 待解决
如何在全局实现自定义dialog弹窗
3651浏览 • 1回复 待解决