HarmonyOS 鸿蒙Next Arkts自定义组件问题

HarmonyOS 鸿蒙Next Arkts自定义组件问题

学习鸿蒙开发教程，在自定义封装组件时遇到了问题。

教程说自定义封装组件有两种模式，一种是在当前ets文件中自定义组件，如代码中的Header2；一种是在新的ets文件中自定义组件，然后在别的ets文件中import，如代码中的Header。我首先使用的是Header进行封装，封装调用过程正常。接着我引入Header2的自定义之后，编译就会报错。将Header2的自定义注释掉，代码就又能正常运行。

使用的编译工具是DevEco Studio 3.1。

代码如下：

class Item{
  // 结构对象
  name: string
  image: ResourceStr
  price: number
  // 构造函数
  constructor(name: string, image: ResourceStr, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}

// 全局自定义构建函数
/*@Builder function ItemCard(item: Item){
  Row({space: 10}) {
    Image(item.image)
      .width(100)
    Column({space: 4}){
      Text(item.name)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Text('￥: ' + item.price)
        .fontSize(24)
        .fontColor('#f36')
    }
    .alignItems(HorizontalAlign.Start)
    .padding(20)
    .height(120)
  }
  .width('100%')
  .margin(5)
  .padding(10)
  .backgroundColor('#fff')
  .borderRadius(20)
}

// 自定义样式封装，全局
/*@Styles function fillScreen(){
  .width('100%')
  .height('100%')
  .padding(10)
  .backgroundColor('#DCDCDC')
}

// 自定义字体样式
@Extend(Text) function priceText(){
  .fontSize(24)
  .fontColor('#f36')
}

/*@Component
struct Header2 {
  private title: ResourceStr
  // 标题构建
  build() {
    Row() {
      Image($r('app.media.ic_public_back'))
        .width(30)
      // Blank(1)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      // Image($r('app.media.test1'))
      Blank()
      Image($r('app.media.ic_public_refresh'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}

import { Header } from '../components/commonComponents'
@Entry
@Component
struct ItemPage {
  private items: Array<Item> = [
    new Item('测试1', $r('app.media.test1'), 25),
    new Item('测试2', $r('app.media.test2'), 26),
    new Item('测试3', $r('app.media.test3'), 27),
    new Item('测试4', $r('app.media.test4'), 28),
    new Item('测试5', $r('app.media.test5'), 29)
  ]
  @State message: string = '商品列表'

  build() {
    Column({ space: 8 }) {
      // 标题部分
      // Header2({title: "sss"})
      Header({title: this.message})
        .margin({left: 5, top: 20, bottom: 10, right: 5})
        .padding({left: 10, right: 10})

      // 商品列表部分
      List({space: 8}) {
        ForEach(
          this.items,
          (item: Item) => {
            ListItem(){
              this.ItemCard(item)
            }
          }
        )
      }
      .width('100%')
      .layoutWeight(1)

    }
    .fillScreen()
  }

  // 自定义样式封装，全局
  @Styles  fillScreen(){
    .width('100%')
    .height('100%')
    .padding(10)
    .backgroundColor('#DCDCDC')
  }

  // 局部自定义构建函数，使用时要加this
  @Builder ItemCard(item: Item){
    Row({space: 10}) {
      Image(item.image)
        .width(100)
      Column({space: 4}){
        Text(item.name)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Text('￥: ' + item.price)
          .priceText()
      }
      .alignItems(HorizontalAlign.Start)
      .padding(20)
      .height(120)
    }
    .width('100%')
    .margin(5)
    .padding(10)
    .backgroundColor('#fff')
    .borderRadius(20)
  }
}

运行结果展示：

不定义Header2：

加入Header2的定义：