// xxx.ets
@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(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组件的颜色淡,要怎么处理让按钮上方自带的禁用样式不生效呢?
这个Button禁用蒙版没法去掉,HarmonyOS目前Button设置disabled状态时背景颜色会变浅优先级高于stateStyle设置的级别,可以用Text组件代替Button实现想要的效果。
请参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-polymorphic-style-V5\#示例1