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

第二种：使用封装拓展样式@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%') 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

HarmonyOS

zxjiu

2024-08-08 18:13:46

浏览

回答 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%') 
  } 
}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.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

2024-08-08 20:58:46

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

发布

51CTO

51CTO博客

51CTO学堂

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

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