HarmonyOS Button的拓展属性中不支持stateStyles,如何封装实现按钮的通用点击效果?

问题描述:我们在封装通用组件时,考虑使用两种方案:

第一种:直接封装组件,这样做存在一个问题,就是在其他页面引入组件后,把组件enable设置为false,无法触发组件内Button的stateStyles,按钮颜色未变为红色。

@Component 
export struct CommonButton { 
  text = '按钮' 
  onClickEvent = () => { 
  }; 
 
  build() { 
    Button(this.text, { type: ButtonType.Normal }) 
      .fontSize(16) 
      .height(48) 
      .borderRadius(8) 
      .backgroundColor('#00CE83') 
      .stateStyles({ 
        disabled: { 
          .backgroundColor(Color.Red) 
        } 
      }) 
      .width('100%') 
  } 
}

第二种:使用封装拓展样式@Extend在使用Button的拓展属性@Extend(Button),给按钮设置通用点击样式stateStyles,但是此时编译器报错“Identifier expected. <ArkTSCheck>”。

@Extend(Button) 
function commonButtonStyle() { 
  .fontSize(16) 
  .height(48) 
  .borderRadius(8) 
  .backgroundColor('#00CE83') 
  .stateStyles({ 
    disabled: { 
      //此处 . 报错 Identifier expected. 
      .backgroundColor(Color.Red) 
    } 
  }) 
  .width('100%') 
}

请问有没有办法实现封装通用 按钮,并且可以stateStyles内的属性生效?

HarmonyOS
2024-08-08 18:13:46
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

demo如下,大组件被禁用了,没有传递到子组件。

@Entry 
@Component 
export struct CommonButton { 
  @Prop isEnable : boolean = false 
  text = '按钮' 
  onClickEvent = () => { 
  }; 
 
  build() { 
    Button(this.text, { type: ButtonType.Normal }) 
      .fontSize(16) 
      .height(48) 
      .enabled(this.isEnable) 
      .borderRadius(8) 
      .backgroundColor('#00CE83') 
      .stateStyles({ 
        disabled: { 
          .backgroundColor(Color.Red) 
        }, 
        pressed: { 
          .backgroundColor(Color.Black) 
        }, 
      }) 
      .width('100%') 
  } 
} 
 
import { CommonButton } from './back/ButtonStyles' 
 
@Entry 
@Component 
struct AccountPage { 
  @State isEnable : boolean = false 
  build() { 
    Column({space:10}) { 
      CommonButton({isEnable : this.isEnable}) 
      Button('disable') 
        .type(ButtonType.Capsule) 
        .onClick(() => { 
          this.isEnable = !this.isEnable 
        }) 
    }.height('100%') 
    .width('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-08-08 20:58:46
相关问题
如何实现按钮点击效果
344浏览 • 2回复 待解决
Refresh组件不支持设置nestedScroll属性
1806浏览 • 1回复 待解决
如何实现通用吸顶效果
586浏览 • 1回复 待解决
linear-gradient不支持start,end属性
745浏览 • 1回复 待解决
Button等控件设置点击效果
877浏览 • 1回复 待解决
应用开发CSS不支持伪元素吗?
6454浏览 • 1回复 待解决
arkts不支持bigint数据类型
1865浏览 • 1回复 待解决
@BuilderParam 不支持普通class变量
689浏览 • 1回复 待解决
如何禁止Button点击事件?
394浏览 • 1回复 待解决
Panel不支持水平方向拖拉
602浏览 • 1回复 待解决
web组件不支持localstorage
708浏览 • 1回复 待解决