美文网首页鸿蒙
@Styles装饰器:定义组件重用样式

@Styles装饰器:定义组件重用样式

作者: wendy__xu | 来源:发表于2024-03-07 18:12 被阅读0次

装饰器使用说明

  • 当前@Styles仅支持通用属性通用事件
  • @Styles方法不支持参数
  • @Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。

只能在当前文件内使用,不支持export。

使用场景

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }
  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

相关文章

  • ember*3.5(定义一个组件)

    为了定义一个组件,运行: ember 组件用来将标记文本和样式转换为可重用内容。组件包含两块:一个用来定义行为的J...

  • 7,React Native 之Flexbox布局

    1,来张分析图 组件 样式,在const styles = StyleSheet.create({});方法写

  • react中装饰器的应用(反向继承)

    定义一个loading组件在app组件加上 @loading 装饰器app组件 就继承了 loading 组件的方法

  • 干聊小程序UI

    从input组件说起 编译模板 内置组件样式 可直接重用的loading 编译模板 内置组件样式 以上代码中l通用...

  • 06-Flutter 容器类组件

    容器类组件 Padding 留边距 Container 容器-内外边距,宽高 装饰器Decoration 容器样式...

  • values 资源目录

    demens.xml:定义尺寸资源 string.xml:定义字符串资源 styles.xml:定义样式资源 co...

  • Python装饰器

    极简样式: 标准样式: 装饰器带参数样式:

  • Android style详解

    样式的定义 Android的样式一般定义在res/values/styles.xml文件中,其中有一个根元素

  • Android-->RatingBar自定义大小,自定义样

    1:首先声明自定义RatingBar的样式(values/styles.xml) 2:自定义RatingBar的图...

  • 装饰器

    装饰器 函数装饰器,将其他函数功能增强,实现函数代码重用,函数功能重用。性能测试,插日志,抽离出大量和函数无关的 ...

网友评论

    本文标题:@Styles装饰器:定义组件重用样式

    本文链接:https://www.haomeiwen.com/subject/datezdtx.html