HarmonyOS 鸿蒙Next Toggle组件enable为false时组件selectedColor颜色变暗

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Toggle组件enable为false时组件selectedColor颜色变暗 在实际开发中 点击Toggle组件,都是会调用接口,根据接口的返回再去改变Toggle的状态

所以封装了如下SwitchButton组件,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 鸿蒙Next Toggle组件enable为false时组件selectedColor颜色变暗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

以通过 .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)
  }
}

更多关于HarmonyOS 鸿蒙Next Toggle组件enable为false时组件selectedColor颜色变暗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙)系统中,Next Toggle组件的enable属性用于控制组件是否可用。当enable设置为false时,组件会进入不可用状态,这通常伴随着视觉上的变化,比如文字颜色、背景颜色或者边框颜色的变暗,以向用户表明该组件当前不可操作。

关于selectedColor属性,在Toggle组件中,它通常用于定义组件被选中时的颜色。然而,当组件被禁用时(即enablefalse),selectedColor的实际显示效果可能会受到系统默认禁用样式的影响,导致颜色看起来变暗,这是系统设计上的一种用户交互反馈机制。

如果你想在组件禁用时保持selectedColor的亮度不变,你可能需要自定义组件的禁用样式。这通常涉及到修改组件的样式属性或者使用自定义的Drawable资源来覆盖默认的禁用效果。不过,请注意,直接修改系统组件的默认行为可能需要深入了解鸿蒙系统的UI框架和样式系统,并且可能涉及到对组件源码的修改或扩展。

如果上述解释仍无法解决你的问题,可能是因为具体实现细节有所不同。此时,建议你查阅鸿蒙系统的官方文档或相关开发指南,以获取更准确的解决方案。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部