if (this.isOk) {
Image(iconOK).exImage()
} else {
Image(iconDe).exImage()
}
Text(con).fontSize(20).fontColor("#000").fontWeight(FontWeight.Bold).decoration({
type: this.isOk ? TextDecorationType.LineThrough : TextDecorationType.None,
color: this.isOk ? "#f00" : "#00f",
})
}

@Extend(Image) function exImage() {
.width(20)
.height(20)
.margin(20)
}```

//自定义通用组件样式的话 用 @Styles  自定义专用组件样式,用 @Extend (扩展)  可以参考 Page2.ets 文件

@Entry
@Component
struct Page2 {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column({ space: 20 }) {
        Text("1").exText(20)
        Text("---2").exText(30, Color.Green)
        Text("=======3").exText(30)
        Text("4444444444").exText(40, "#f00")
        Text("看看文本样式").exText(40).fontStyle(FontStyle.Italic)
        Text("测试可空").exText()
        Image($r("app.media.ic_ok")).commStyle()
        Button({ type: ButtonType.Capsule }).commStyle().backgroundColor("#f00")
        Text("").commStyle().backgroundColor("#00f")
        Text("帝心老师的课程")
          .commStyle() //TODO  通用样式
          .exText(40) //TODO 组件设置的样式
          .backgroundColor("#0f0").width("70%").height(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

//固定组件样式可以传递,建议形参上标记上是否可空
@Extend(Text) function exText(fs?: number, co?: Color | string) {
  .fontSize(fs)
  .fontColor(co)
  .fontStyle(FontStyle.Normal)
  .textAlign(TextAlign.Start)
  .height(40)
  .backgroundColor("#0f0")
  .width("100%")
}


//通用组件样式,不能传递参数
@Styles function commStyle() {
  .width("100")
  .height(50)
  .backgroundColor("#eee")
}



//创建实体类的写法
/**
 * Author:HarmonyOS 4.0
 * Date:2023/12/23
 * Describe:  实体类要这样写 export default class HobbyBean {  xxxx}
 * 注意不能用 new 出来类名
 */

export default class HobbyBean {
  private name?: string
  private isCheck?: boolean

  constructor(name?: string, isCheck?: boolean) {
    this.name = name
    this.isCheck = isCheck
  }
}

// export default new HoxbbyBean()



//自定义一个弹框 CustomDialogWidget 要用@CustomDialog修饰 
里面必须有个控制器,否则编译会报错 private customDialogController: CustomDialogController

//把自定义自己里面的值通过回调方法给回调到外面
subText = (info: string) => {
}
//具体在 MyDialogInputView 里面有使用的案例
MyDialogInputView({ placeholder: "家庭地址",
    imageHolder: $r("app.media.test3"),
    subInfo: $subString, subText: (address: string) => {
      this.inPut3Address = address
} })

//=====================

[](https://mayw-teaching.feishu.cn/docx/H3qlddyh6oXEpUxBqp9cjCwPnic)

https://mayw-teaching.feishu.cn/docx/H3qlddyh6oXEpUxBqp9cjCwPnic
!!!!!!!  TODO 重点
!!!!!!!  TODO 重点
!!!!!!!  TODO 重点
父子组件需要数据同步和绑定的处理
单向数据同步:父-----单向---->>>子 用  @State 和 @Prop
双向数据同步:父<<<--双向---->>>子 用  @State 和 @Link
跨组件数据双向同步  @Provide装饰器和@Consume装饰器：与后代组件双向同步

@State stateImage0: Resource = $rawfile("stateImage0.png")
@State stateImage1: Resource = $rawfile("stateImage1.png")
@State stateImage2: Resource = $rawfile("stateImage2.png")

- @State：@State装饰的变量拥有其所属组件的状态，可以作为其子组件单向和双向同步的数据源。当其数值改变时，会引起相关组件的渲染刷新。
- @Prop：@Prop装饰的变量可以和父组件建立单向同步关系，@Prop装饰的变量是可变的，但修改不会同步回父组件。
- @Link：@Link装饰的变量和父组件构建双向同步关系的状态变量，父组件会接受来自@Link装饰的变量的修改的同步，父组件的更新也会同步给@Link装饰的变量。
- @Provide/@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。
- @Observed：@Observed装饰class，需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用，需要和@ObjectLink、@Prop连用。
- @ObjectLink：@ObjectLink装饰的变量接收@Observed装饰的class的实例，应用于观察多层嵌套场景，和父组件的数据源构建双向同步。



@Provide装饰器和@Consume装饰器：与后代组件双向同步

@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。
其中@Provide装饰的变量是在祖先节点中，可以理解为被“提供”给后代的状态变量。@Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先节点提供的变量。
@Provide/@Consume装饰的状态变量有以下特性：
- @Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。
- 后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。
- @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。
@Provide和@Consume通过相同的变量名或者相同的变量别名绑定时，@Provide修饰的变量和@Consume修饰的变量是一对多的关系。不允许在同一个自定义组件内，包括其子组件中声明多个同名或者同别名的@Provide装饰的变量。


//路由的跳转 可以传递页面 传递参数 设置启动模式 回调页面跳转的错误状态码
replaceUrl   这个是跳转并替换页面
router.pushUrl({
  url: "myDialog2/pages/MyInfoPage",
  params: { name: "张三", age: 23 },
}, router.RouterMode.Standard, (err) => {
  if (err) {
    Prompt.showToast({ message: err.message + err.code + err.name })
  }
})



//输入框 设置点击时候聚焦的背景颜色,可以先设置backgroundColor为透明色
TextInput({ placeholder: this.placeholder })
    .backgroundColor(Color.Transparent)
    .placeholderColor("#999")
    .caretColor("#f00")
    .margin({ left: 10, right: 10 })
    .layoutWeight(1)//.backgroundColor(Color.Red)
    .onChange((value: string) => {
      let info = value.toString()
      this.subInfo = info
      this.subText(info)
    })
    .stateStyles({
      pressed: {
        .backgroundColor("#fff")
      }
    })

//鸿蒙自定义方形输入框(仿滴滴)短信验证码  InputCodePage
https://blog.csdn.net/u011345545/article/details/135036872


import web_webview from '@ohos.web.webview'
controller: web_webview.WebviewController = new web_webview.WebviewController()
 Web({ src: "https://www.baidu.com", controller: this.controller })
        .domStorageAccess(true)

//通用的背景色,这样有阴影效果

@Styles
function card2() {
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
}