HarmonyOS 如何实现动态样式

@Extend(Text) function titleStyle() {
  .width('100%')
  .fontSize(14)
  .fontColor('#969799')
  .lineHeight(16)
  .padding({
    top: 16,
    bottom: 8,
    left: 16,
    right: 16
  })
}
@Extend(Column) function groupStyle() {
  .width('100%')
  .backgroundColor('#fff')
}
@Extend(Column) function insetStyle() {
  .borderRadius(8)
  .margin({
    top: 0,
    bottom: 0,
    left: 16,
    right: 16
  })
}
@Component
export default struct CellGroup {
  private title:string = '';
  private inset:boolean = false;
  @BuilderParam closer: () => void;
  build() {
    Column() {
      if(this.title){
        Text(this.title).titleStyle()
      }
      Column(){
        this.closer()
      }.groupStyle()
    }
  }
}

如何实现当inset为true时,Column追加上insetStyle()样式?

HarmonyOS
2024-12-26 15:04:22
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以使用动态属性设置实现,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5

以下是参考的demo:

@Extend(Text)
function titleStyle() {
  .width('100%')
  .fontSize(30)
  .fontColor('#969799')
  .lineHeight(16)
  .padding({
    top: 16,
    bottom: 8,
    left: 16,
    right: 16
  })
}
@Extend(Column)
function groupStyle() {
  .width('100%')
  .backgroundColor('#fff')
}
class insetStyle implements AttributeModifier<TextAttribute> {
  inset: boolean = false
  applyNormalAttribute(instance: TextAttribute): void {
    if (this.inset) {
      instance.borderRadius(8)
        .margin({
          top: 20,
          bottom: 0,
          left: 16,
          right: 16
        })
    }
  }
}
@Entry
@Component
export default struct CellGroup {
  private title: string = 'werwerwer';
  @State inset: boolean = false;
  @State modifier01: insetStyle = new insetStyle()
  build() {
    Column() {
      if (this.title) {
        Text(this.title).titleStyle()
      }
      Column() {
        Text('ceshi').attributeModifier(this.modifier01)
          .onClick(() => {
            this.modifier01.inset = !this.modifier01.inset;
          })
      }.groupStyle()
    }
  }
}
分享
微博
QQ
微信
回复
2024-12-26 17:28:09
相关问题
HarmonyOS 如何实现剪裁样式
154浏览 • 1回复 待解决
HarmonyOS 如何实现气泡样式
251浏览 • 1回复 待解决
HarmonyOS 如何实现通用样式
343浏览 • 1回复 待解决
HarmonyOS如何实现动态缩放动画
748浏览 • 1回复 待解决
HarmonyOS 如何实现券组件的挖空样式
212浏览 • 1回复 待解决
HarmonyOS 动态hook实例方法如何实现
996浏览 • 1回复 待解决
如何HarmonyOS实现动态主题切换?
586浏览 • 0回复 待解决
如何HarmonyOS实现动态加载模块?
736浏览 • 1回复 待解决
如何实现路由的动态跳转呢
727浏览 • 1回复 待解决
是否支持模块的动态加载?如何实现
2832浏览 • 1回复 待解决
组合样式怎样去实现导入导出
2303浏览 • 1回复 待解决
HarmonyOS 文件资源动态下载能否实现
226浏览 • 1回复 待解决
如何实现一个仪表盘样式的组件?
698浏览 • 1回复 待解决