HarmonyOS 鸿蒙Next 怎么让disable状态下Button组件不显示最上方禁用样式蒙版

HarmonyOS 鸿蒙Next 怎么让disable状态下Button组件不显示最上方禁用样式蒙版

@Entry
@Component
struct Index {
  @State isEnable: boolean = true

  @Styles
  pressedStyles(): void { .backgroundColor("#ED6F21")
    .borderRadius(10)
    .borderStyle(BorderStyle.Dashed)
    .borderWidth(2)
    .borderColor("#33000000")
    .width(120)
    .height(30)
    .opacity(1)
  }

  @Styles
  disabledStyles(): void { .backgroundColor("#ED6F21")
    .borderRadius(10)
    .borderStyle(BorderStyle.Solid)
    .borderWidth(2)
    .borderColor("#2a4c1919")
    .width(90)
    .height(25)
    .opacity(1)
  }

  @Styles
  normalStyles(): void { .linearGradient(undefined)
    .backgroundColor("#0A59F7")
    .borderRadius(10)
    .borderStyle(BorderStyle.Solid)
    .borderWidth(2)
    .borderColor("#2a4c1919")
    .width(90)
    .height(25)
    .opacity(1)
  }

  build() {
    Flex({
      direction: FlexDirection.Column,
      alignItems: ItemAlign.Center
    }) {
      Text(“normal”)
        .fontSize(14)
        .fontColor(Color.White)
        .opacity(0.5)
        .stateStyles({
          normal: this.normalStyles,
        })

        .margin({ bottom: 20 })
        .textAlign(TextAlign.Center)
      Text(“pressed”)
        .backgroundColor("#0A59F7")
        .borderRadius(20)
        .borderStyle(BorderStyle.Dotted)
        .borderWidth(2)
        .borderColor(Color.Red)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)

        .fontColor(Color.White)
        .stateStyles({
          pressed: this.pressedStyles,
        })
        .margin({ bottom: 20 })
        .textAlign(TextAlign.Center)
      Text(this.isEnable == true ? “effective” : “disabled”)
        .fontColor(Color.White)
        .enabled(this.isEnable)
        .stateStyles({ normal: this.normalStyles, disabled: this.disabledStyles, })
        .textAlign(TextAlign.Center)
      Button(this.isEnable == true ? “effective” : “disabled”)
        .width(100)
        .height(25)
        .enabled(this.isEnable)
        .stateStyles({ normal: this.normalStyles, disabled: this.disabledStyles, })
      Blank().height(100)
      Text(“control disabled”).onClick(() => {
        this.isEnable = !this.isEnable
        console.log(${this.isEnable})
      })
    }.width(350).height(300)
  }
} 

 在上方这个demo中，同时改变Text组件和Button组件的状态，让他们同时处于disable状态，同时我设置了disabledStyles，发现Button组件和预期想要的效果有出入，disable状态下按钮上方又盖了一层禁用样式的颜色，导致要比Text组件的颜色淡，要怎么处理让按钮上方自带的禁用样式不生效呢，最后附上disable状态下的效果图片


更多关于HarmonyOS 鸿蒙Next 怎么让disable状态下Button组件不显示最上方禁用样式蒙版的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next 怎么让disable状态下Button组件不显示最上方禁用样式蒙版的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，Button组件在disable状态下默认会显示一个禁用样式的蒙版。若想让Button在禁用时不显示这个蒙版，可以通过自定义样式实现。具体操作如下：

  1. 自定义样式：在XML布局文件中为Button定义一个自定义样式，或者直接在Button标签内使用ohos:attr/button_disabled_background属性来设置禁用状态下的背景。

  2. 透明背景：将ohos:attr/button_disabled_background属性设置为透明色（如#00000000），这样Button在禁用时就不会显示任何蒙版。

  3. Java/Kotlin代码控制：如果在代码中动态设置Button的禁用状态，可以在设置禁用状态后，通过代码进一步设置Button的背景为透明，以确保禁用样式蒙版不显示。

示例XML代码片段：

<Button
    ohos:id="$+id:my_button"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:text="My Button"
    ohos:attr/button_disabled_background="#00000000"/>

注意，上述方法适用于大多数情况，但具体实现可能因版本或项目配置而异。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部