Styles 和 Extend 组件的扩展样式

// 内部公共样式
@Styles function titleText2(){
  .width(100).height(100).backgroundColor(Color.Red).borderRadius(10)
}

// 定义 Text 组件的扩展样式
@Extend(Text) function textStyles(){
  .fontSize(16).fontColor($r('app.color.add_title_color'))
}

// 定义 TextInput 组件的扩展样式
@Extend(TextInput) function inputStyles(){
  .fontSize(16).fontColor($r('app.color.add_title_color')).borderRadius(0).backgroundColor('#f1f3f5').placeholderColor($r('app.color.text_color'))
}

@Extend(Line) function lineStyles(value:string|number ='100%'){
  .width(value).height(1).backgroundColor($r('app.color.add_title_color'))
}


@Entry
@Component
struct Page06_AddTask {
  @State title: string = '新建任务'

  build() {
    Column() {
      // 标题模块
      Text(this.title).fontSize(26) .fontWeight(FontWeight.Bold).fontColor($r('app.color.text_color'))

      //  页面主题内容
      Column(){
        // 标题模块
        Column(){
          // Text('标题').fontSize(16).fontColor($r('app.color.add_title_color'))
          Text('标题').textStyles()

          // TextInput({placeholder:'请输入标题'}).fontSize(16).fontColor($r('app.color.add_title_color')).borderRadius(0).backgroundColor('#f1f3f5')
          TextInput({placeholder:'请输入标题'}).inputStyles()

            Line().lineStyles()


        }.width('100%').alignItems(HorizontalAlign.Start)

      }

    }
    .width('100%').height('100%').padding(10).backgroundColor('#f1f3f5')
  }
}



demo2 

@Styles function BtnStyles(){
  .width(100)
  .height(40)
  .borderRadius(10)
}

@Extend(Button) function ButtonStyles(color){
  .width(100)
  .height(40)
  .borderRadius(10)
  .type(ButtonType.Normal)
  .backgroundColor(color)
}

@Entry
@Component
struct StylesPage {

  // @Styles BtnStyles(){
  //   .width(100)
  //   .height(40)
  //   .borderRadius(10)
  //
  // }

  build() {
    Column() {
      Row({ space: 50 }) {
        Button('确认')
          .ButtonStyles(Color.Green)
          .onClick(() => console.log('确认'))
        Button('取消')
          .ButtonStyles(Color.Gray) 
          .onClick(() => console.log('取消'))
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}