HarmonyOS Toggle组件enable为false,组件selectedColor颜色变暗

点击Toggle组件根据接口的返回去改变Toggle的状态,封装了如下SwitchButton组件,将Toggle设置enable为false将点击事件设置在其父组件上,根据点击父组件调用接口并修改Toggle的状态,但是目前碰到一个问题,将Toggle设置enable为false后,Toggle的selectColor的颜色值会变暗和实际设置的值不一样,如何解决这个问题?

@Component
export struct SwitchButton {
  @State selectedColor: ResourceColor = $r('app.string.switch_button_selected_color')
  @State unselectedColor: ResourceColor = $r('app.string.switch_button_unselected_color')
  @State pointRadius: number | Resource = $r('app.string.switch_button_point_radius')
  @State pointColor: ResourceColor = $r('app.string.switch_button_point_color')
  @State trackBorderRadius: number | Resource = $r('app.string.switch_button_track_border_radius')
  @State sbWidth: Length = $r('app.string.switch_button_width')
  @State sbHeight: Length = $r('app.string.switch_button_height')
  @Prop isOn: boolean = false
  action?: (isOn: boolean) => void

  build() {
    Stack() {
      Toggle({ type: ToggleType.Switch, isOn: this.isOn })//TODO:设置的颜色值会变暗
        .enabled(false)
        .selectedColor(this.selectedColor)
        .switchStyle({
          pointRadius: this.pointRadius,
          trackBorderRadius: this.trackBorderRadius,
          pointColor: this.pointColor,
          unselectedColor: this.unselectedColor,
        })
        .width(this.sbWidth)
        .height(this.sbHeight)
    }
    .backgroundColor(Color.Transparent)
    .onClick(() => {
      this.action?.(this.isOn)
    })
  }
}
HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以通过.hitTestBehavior(this.isEnable? HitTestMode.Transparent: HitTestMode.None)来代替enable实现阻断交互,触摸测试控制参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-hit-test-behavior-V5#hittestbehavior

示例参考:

@Entry
@Component
struct ToggleExample {
  @State isEnable: boolean = true
  @State isOn: boolean = true
  build() {
    Column({ space: 10 }) {
      Text('type: Switch').fontSize(16).fontColor(Color.Green).width('90%').onClick(() => {
        this.isEnable = !this.isEnable
      })

      Toggle({ type: ToggleType.Switch, isOn: this.isOn })
        .selectedColor('#007DFF')
        .switchPointColor('#FFFFFF')
        .hitTestBehavior(this.isEnable ? HitTestMode.Transparent : HitTestMode.None)
        .onChange((isOn: boolean) => {
          console.info('Component status:' + isOn)
          this.isOn = isOn
        })
    }.width('100%').padding(24)
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS Toggle组件怎么拦截?
422浏览 • 1回复 待解决
HarmonyOS isFullScreen获取始终false
26浏览 • 1回复 待解决
HarmonyOS toggle组件是否支持完全受控
475浏览 • 0回复 待解决
List组件divider颜色显示透List组件颜色
322浏览 • 0回复 待解决
控件enabled设置false时,hover失效
2284浏览 • 1回复 待解决
HarmonyOS Image组件如何设置填充颜色
26浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
2174浏览 • 1回复 待解决
设置XComponent组件透明
558浏览 • 1回复 待解决