HarmonyOS TimePicker 能否自定义背景色？

Question

请问下TimePicker 能否自定义背景色，效果见图片

Answer 1

TimePicker暂不支持，您可以把TimePicker的背景色设为透明，通过堆叠达到你想要的效果，可以参考

@Entry
@Component
struct TimePickerExample {
  @State isMilitaryTime: boolean = false
  private selectedTime: Date = new Date('2022-07-22T08:00:00')

  build() {
    Column() {
      Button('切换12小时制/24小时制')
        .margin(30)
        .onClick(() => {
          this.isMilitaryTime = !this.isMilitaryTime
        })
      Stack() {
        Column().backgroundColor(Color.Yellow).zIndex(1).width(500).height(500)
        Row()
          .backgroundColor(Color.Orange)
          .zIndex(2)
          .width(300)
          .height(60)
          .offset({ y: 10 })
        TimePicker({
          selected: this.selectedTime,
        })
          .zIndex(3)
          .backgroundColor('#00000000')
          .useMilitaryTime(this.isMilitaryTime)
          .onChange((value: TimePickerResult) => {
            if (value.hour >= 0) {
              this.selectedTime.setHours(value.hour, value.minute)
              console.info('select current date is: ' + JSON.stringify(value))
            }
          })
          .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 } })
      }
    }.width('100%')
  }
}