提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、关于样式

1 . 默认单位 vp

答： vp 是 virtual pixel 的缩写，根据设备像素密度转化为屏幕物理像素，px 直接表示设备的像素，因为我们设备的分辨率密度不同，最好是使用 vp

适配： 可以使用伸缩布局layoutWeight,flex布局，网格系统，栅格系统布局，

2 . 写公共样式

在开发过程中会出现大量代码在进行重复样式设置，@Styles 和 Extend 可以帮我们进行样式复用

1. @styles 方式

• 只支持通用属性 和 通用事件，且不支持箭头函数语法
• 在组件内（局部）无需加 function , 在组件外（全局） 定义时要加function

@Styles function textStyle () {
  .width(100)
  .height(50)
  .backgroundColor(Color.Pink)
  .borderRadius(25)
  .onClick(() => {
    promptAction.showToast({
       message: "测试"
    })
  })
}

2. Extend 方式

• 使用 @Extend 装饰器修饰的函数只能是 全局
• 且参数可以是一个函数，实现复用事件且可处理不同逻辑
• 函数可以进行 传参，如果参数是状态变量，状态更新后会刷新UI

// 全局  原生组件                     参数
//  ↓     ↓                          ↓ 
@Extend(Text) function textInputAll (callback?: () => void) {
  .width(100)
  .height(50)
  .backgroundColor(Color.Pink)
  .borderRadius(25)
  .textAlign(TextAlign.Center)
  .fontColor(Color.White)
  .onClick(() => {
    callback && callback()
  })
}

二 、 加载图片

1. 使用本地图片

// 可以新建一个文件夹，里面放本地图片（ets下）
Image('/assets/a.png')

2. 使用 resource 下的 media 图片

// resource/media  (a 是文件名，扩展名省略)
Image($r('/app.media.a'))

3. 使用 resource 下的 rawfile 图片

// resource/rawfile
Image($rawfile('a.png'))

4. 使用网络图片(必须申请网络权限)

// resource/rawfile
Image("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2bf1b169-d217-44c3-a5b3-dd00813bc20d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704614176&t=e15a2fd5193aeeb24fc95b5dbe395907")

"requestPermissions": [{
  "name":"ohos.permission.INTERNET"
}],

三 、 父子组件传值

• 父传子

// 父组件的子组件上，传递一个对象（HmCommentItem）
   HmCommentItem({ item:item})
// 子组件上进行接收
  item: Partial<ReplyItem> = {} // 默认是public

• 子传父（目的是修改父组件的值）

// 父组件的子组件上，传递一个方法（HmCommentItem）
 HmCommentItem({ item:item,changeLike:(item)=>{
                this.changeLike(item)
              }})
// 子组件上进行接收
changeLike: (params: ReplyItem) => void = () => {} // 接受一个无返回值的方法，默认是空函数

四 、 自定义构建函数 @Builder

如果你不想在直接抽象组件， ArkUI 还提供了一种更轻量的UI元素复用机制 @Builder，可以将重复使用的 UI 元素抽象成一个方法，在 build 方法里调用。称之为自定义构建函数

1. 使用@Builder 定义一个函数（全局加function）
2. 在组件里使用这个函数

// 定义 Builder
@Builder
function getCellContent(leftTitle: string, rightValue: string) {
  Row() {
    Row() {
      Text(leftTitle)
      Text(rightValue)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({
      left: 15,
      right: 15
    })
    .borderRadius(8)
    .height(40)
    .backgroundColor(Color.White)
  }.padding({
    left: 10,
    right: 10
  })

}

class CardClass {
  time: string = ""
  location: string = ""
  type: string = ""
}
@State formData: CardClass = {
    time: "2023-12-12",
    location: '回龙观',
    type: '漏油'
  }
// 在组件里使用
Column({ space: 10 }) {
        getCellContent("异常时间", this.formData.time)
        getCellContent("异常位置", this.formData.location)
        getCellContent("异常类型", this.formData.type)
        
        Button("修改数据").onClick(() => {
          this.formData.location = "望京"
        })
      }
      .width('100%')

全局自定义函数的问题

1. 全局的自定义构建函数可以被整个应用获取（下一代可用-当前4.0暂不支持），不允许使用this和bind方法。

2. 不可被其他文件引用

3. 当我点击按钮时数据即使是响应式的，当数据发生改变，该函数不会自动渲染

   • 因为我们刚刚传过去的是一个string类型， string 类型是一个基础类型，按值传递，不具备响应式更新的特点 解决方案：改为按引用传递

// 完整代码
@Entry
@Component
struct BuilderCase {
  @State formData: CardClass = {
    time: "2023-12-12",
    location: '回龙观',
    type: '漏油'
  }
  @Builder
  getCellContent($$: CellParams) {
    Row() {
      Row() {
        Text($$.leftTitle)
        Text($$.rightValue)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left: 15,
        right: 15
      })
      .borderRadius(8)
      .height(40)
      .backgroundColor(Color.White)
    }.padding({
      left: 10,
      right: 10
    })

  }
  build() {
    Row() {
      Column() {
        Column({ space: 10 }) {
          this.getCellContent({ leftTitle: '异常时间', rightValue: this.formData.time })
          this.getCellContent({ leftTitle: '异常位置', rightValue: this.formData.location })
          this.getCellContent({ leftTitle: '异常类型', rightValue: this.formData.type })
        }
        .width('100%')
        Button("修改数据").onClick(() => {
          this.formData.location = "望京"
        })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#ccc')
  }
}

class CardClass {
  time: string = ""
  location: string = ""
  type: string = ""
}
class CellParams {
  leftTitle: string = ""
  rightValue: string = ""
}

五、构建函数-@BuilderParam 传递UI

Vue里面有个叫做slot插槽的东西，就是可以传入自定义的结构，整体复用父组件的外观
ArkTS提供了一个叫做BuilderParam的修饰符，你可以在组件中定义这样一个函数属性，在使用组件时直接传入

1. 使用@BuilderParam 声明一个组件，子组件要在想要显示插槽的地方来调用传入的方法
2. 在父组件里调用并传入，父组件传递是一个函数，这个函数也要使用 @Builder 修饰

// 使用BuilderParam 声明组件
@Component
struct  HMCard {
  @BuilderParam
  content: () => void
  build() {
    Column () {
      Text("卡片组件")
      Divider()
      Text("传入内容")
      if(this.content) {
        this.content()  // 子组件要在想要显示插槽的地方来调用传入的方法
      }
    }
  }
}

@Entry
@Component
struct BuilderParamCase {
// 声明渲染的函数组件
  @Builder
  getContent () {
    Row() {
      Text("插槽内容")
        .fontColor(Color.Red)
    }
  }
  build() {
    Row() {
      Column() {
        HMCard({ content: this.getContent })  // 调用组件并传入要渲染的函数
      }
      .width('100%')
    }
    .height('100%')
  }
}