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)
    })
  }
}
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.

HarmonyOS

Heiang

2024-12-25 13:39:24

浏览

回答 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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

2024-12-25 16:24:22

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看