HarmonyOS--ArkTS(1)--基本语法(2)

目录

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

@Extend装饰器:定义扩展组件样式 

stateStyles:多态样式 

@Builder装饰器:自定义构建函数

自定义组件内自定义构建函数

全局自定义构建函数

@BuilderParam装饰器:引用@Builder函数 


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

  • @Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
  • 定义在组件内的@Styles可以通过this访问组件的常量和状态变量,并可以在@Styles里通过事件来改变状态变量的值,示例如下:
  • 组件内@Styles的优先级高于全局@Styles。

    框架优先找当前组件内的@Styles,如果找不到,则会全局查找。

// 定义在全局的@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)
    }
  }
}

@Extend装饰器:定义扩展组件样式 

  • 和@Styles不同,@Extend仅支持定义在全局,不支持在组件内部定义。
  • 和@Styles不同,@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
  • 和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用。

//原代码 

//原代码
@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(100)
        .backgroundColor(Color.Blue)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(200)
        .backgroundColor(Color.Pink)
      Text(`${this.label}`)
        .fontStyle(FontStyle.Italic)
        .fontWeight(300)
        .backgroundColor(Color.Orange)
    }.margin('20%')
  }
}

 //修改后

//全局-可以接收参数
@Extend(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fancyText(100, Color.Blue)
      Text(`${this.label}`)
        .fancyText(200, Color.Pink)
      Text(`${this.label}`)
        .fancyText(300, Color.Orange)
    }.margin('20%')
  }
}

stateStyles:多态样式 

stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下四种状态:

  • focused:获焦态。
  • normal:正常态。
  • pressed:按压态。
  • disabled:不可用态。
@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Click me')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Yellow)
          }
        })
    }.margin('30%')
  }
}

@Builder装饰器:自定义构建函数

自定义组件内自定义构建函数

定义的语法:
@Builder MyBuilderFunction(){ ... }

使用方法:
this.MyBuilderFunction(){ ... }

//下面例子:

@Component
struct TaskList{
  build(){
    Column(){
      Button('添加')
        .width(200)
        .margin({top:20,bottom:10})
        .onClick(()=>{
            使用方法:
            this.MyBuilderFunction(){ ... }
        })
    }
  }
    定义方法
    @Builder MyBuilderFunction(){ ... }
    
}



  • 允许在自定义组件内定义一个或多个@Builder方法,该方法被认为是该组件的私有、特殊类型的成员函数。
  • 自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用,但不允许在组件外调用。
  • 在自定义函数体中,this指代当前所属组件,组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

全局自定义构建函数

定义的语法:
@Builder function MyGlobalBuilderFunction(){ ... }

使用方法:
MyGlobalBuilderFunction()

//下面例子

@Builder function MyGlobalBuilderFunction() {
  //todo
}
@Entry
@Component
struct Demo{
  @State label: string = 'Hello';
  build() {
    Column() {
      Button('Click me').onClick(() => {
        MyGlobalBuilderFunction()
      })
    }
  }
}
  • 全局的自定义构建函数可以被整个应用获取,不允许使用this和bind方法。
  • 如果不涉及组件状态变化,建议使用全局的自定义构建方法。

@BuilderParam装饰器:引用@Builder函数 

当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。 

@Builder function GlobalBuilder0() {}

@Component
struct Child {
  @Builder doNothingBuilder() {};

  @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
  @BuilderParam aBuilder1: () => void = GlobalBuilder0;
  build(){}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 7-1 jmu-java-02基本语法-01是指教学内容的一个章节或课时,主要讲解Java编程语言的基本语法。其包括数据类型、变量、运算符、控制语句等内容。学习这些基本语法是Java编程的基础,也是后续学习更高级的Java知识的必要前提。 ### 回答2: 7-1 jmu-java-02基本语法-01是一门关于Java编程语言的基础语法课程。在这门课程,我们将学习Java语言的重要基础知识,包括Java的语法结构、数据类型、变量、运算符、流程控制、数组、方法和类等知识点。 Java语言是一种面向对象编程语言,它具有简单、安全、可移植、网络化等特点,非常适合用来开发网络应用程序、桌面应用程序和移动应用程序等。 在这门课程,我们将学习Java的基本语法结构,如Java源程序的基本结构、Java标识符、Java关键字、Java注释等。我们还将深入了解Java的基本数据类型、运算符、流程控制语句、数组和方法等。此外,我们还将学习Java的面向对象编程知识,包括类和对象的概念、封装、继承和多态等。 通过学习本课程,我们将能够掌握Java编程的基础语法,能够编写简单的Java程序,如控制台应用程序、图形用户界面程序等。同时,我们还将为深入学习Java各种高级应用程序打下坚实的基础。这将有助于我们更好地理解Java编程语言并更好地应用它来开发各种类型的应用程序。 总之,7-1 jmu-java-02基本语法-01是一门重要的Java编程基础知识课程,通过学习本课程,我们将深入了解Java编程语言的基本语法和面向对象编程知识,从而更好地应用Java编程语言进行开发各种类型的应用程序。 ### 回答3: 7-1 jmu-java-02基本语法-01是Java课程的一个章节,主要是教授Java的基本语法知识,包括Java程序的基本结构、数据类型、运算符、控制语句、数组、方法等方面的知识。 Java程序的基本结构分为包声明、导入类、类声明和主方法四部分。包声明用来声明代码所属的包,导入类用来引入需要使用的类,在类声明部分编写Java代码。主方法则是程序的入口,程序从这里开始执行。 Java数据类型包括基本数据类型和引用数据类型。基本数据类型包括整型、浮点型、字符型和布尔型四种,每种类型具有不同的取值范围和精度。引用数据类型包括类、数组和接口三种,这些类型都是由Java程序员编写的。 Java运算符包括算术运算符、比较运算符、逻辑运算符和位运算符。算术运算符用于对数字进行基本运算,比较运算符用于比较两个值的大小,逻辑运算符用于连接多个逻辑判断语句,位运算符用于对二进制数进行位运算。 Java控制语句包括if语句、switch语句、for语句、while语句和do-while语句。这些语句用于控制程序的运行流程,根据不同的条件执行不同的代码块。 Java数组是一种存储多个相同类型数据的数据结构,可以通过下标访问数组的元素。Java方法是一种封装代码的方式,可以将代码块封装成一个方法,并通过方法名调用这个方法,提高代码的可读性和重用性。 综上所述,7-1 jmu-java-02基本语法-01是Java学习的重要部分之一,通过学习这个章节可以掌握Java的基本语法知识,为深入学习Java编程打下基础。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值