HarmonyOS鸿蒙Next中仓颉自定义组件官方示例也跑不起来

HarmonyOS鸿蒙Next中仓颉自定义组件官方示例也跑不起来

package ohos_app_cangjie_entry

internal import ohos.base.LengthProp
internal import ohos.component.Column
internal import ohos.component.Row
internal import ohos.component.Button
internal import ohos.component.Text
internal import ohos.component.CustomView
internal import ohos.component.CJEntry
internal import ohos.component.loadNativeView
internal import ohos.state_manage.SubscriberManager
internal import ohos.state_manage.ObservedProperty
internal import ohos.state_manage.LocalStorage
import ohos.state_macro_manage.Entry
import ohos.state_macro_manage.Component
import ohos.state_macro_manage.State
import ohos.state_macro_manage.r

[@Entry](/user/Entry)
@Component
class EntryView {
    @State
    var message: String = "Hello Cangjie"
    func build() {
        Row {
            Column {
                Button(message).onClick {
                    evt => AppLog.info("Hello Cangjie")
                }.fontSize(40).height(80)
                te()   //调用就出错
            }.width(100.percent)
        }.height(100.percent)
    }
}

@Component
public class te {
    func build() {
        Column(){
            Text("测试")
        }
    }
}

就是一个简单的测试，就是按文档照着写的，只要调用就报错

@Entry爆红提示the error occurs after the macro is expanded


更多关于HarmonyOS鸿蒙Next中仓颉自定义组件官方示例也跑不起来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

开发者您好，初步怀疑是版本太老导致的，为了更快解决您的问题，麻烦提供以下信息：
开发工具（DevEco Studio及仓颉）版本信息。

更多关于HarmonyOS鸿蒙Next中仓颉自定义组件官方示例也跑不起来的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


1.楼主缺少两个导入：

import ohos.component.*
import ohos.state_manage.*

2.按照下面这个修改就可以了：

完整代码：

package ohos_app_cangjie_entry

internal import ohos.base.LengthProp
internal import ohos.component.Column
internal import ohos.component.Row
internal import ohos.component.Button
internal import ohos.component.Text
internal import ohos.component.CustomView
internal import ohos.component.CJEntry
internal import ohos.component.loadNativeView
internal import ohos.state_manage.SubscriberManager
internal import ohos.state_manage.ObservedProperty
internal import ohos.state_manage.LocalStorage
import ohos.state_macro_manage.Entry
import ohos.state_macro_manage.Component
import ohos.state_macro_manage.State
import ohos.state_macro_manage.r
import ohos.component.*
import ohos.state_manage.*
@Entry
@Component
class EntryView {
    @State
    var message: String = "Hello Cangjie"
    func build() {
        Row {
            Column {
                Button(message).onClick {
                    evt => AppLog.info("Hello Cangjie")
                }.fontSize(40).height(80)
                te()   //调用就出错
            }.width(100.percent)
        }.height(100.percent)
    }
}

@Component
public class te {
    func build() {
        Column(){
            Text("测试")
        }
    }
}

参考文档：状态管理-仓颉组件-API参考 - 华为HarmonyOS开发者

您好，方便提供仓颉插件以及DevEco的版本吗？我们复现一下。

@Builder

使用@Builder注解可以简化构建器模式的实现，自动生成构建器类代码。

直接爆红 macro evaluation has failed for macro call ‘Builder’，

仓颉的自定义组件推荐使用函数式声明而非类声明。类声明方式容易导致宏展开异常。子组件 te 缺少必要的状态修饰符，导致生命周期管理异常。未显式设置基础布局属性（如宽高），可能引发渲染异常。

正确实现方案

// 主入口组件

@Entry

@Component

class EntryView {

    @State

    var message: String = "Hello Cangjie"

    

    func build() {

        Row {

            Column {

                Button(this.message)

                    .onClick { evt => AppLog.info("Clicked!") }

                    .fontSize(40)

                    .height(80)

                CustomComponent()  // 正确调用自定义组件

            }.width(100.percent)

        }.height(100.percent)

    }

}

// 自定义函数式组件（正确姿势）

@Component

public func CustomComponent() {

    Column {

        Text("测试组件")

            .fontSize(30)

    }

    .width(100.percent)

    .height(200.px)

    .backgroundColor("#F0F0F0")

}

@Component
public func CustomComponent() {
    Column {
        Text("测试组件")
            .fontSize(30)
    }
    .width(100.percent)
    .height(200.px)
    .backgroundColor("#F0F0F0")
}

@Component报macro evaluation has failed for macro call 'Component'

鸿蒙Next中仓颉自定义组件示例运行失败通常由以下原因导致：SDK版本与示例代码不兼容、DevEco Studio未更新至匹配版本、项目配置文件（如module.json5）存在语法错误。请检查HarmonyOS SDK是否为最新版本，并确保示例代码针对鸿蒙Next适配。同步项目依赖后清理缓存重试构建。

从代码来看，问题主要出现在自定义组件 te 的声明和调用方式上。在 HarmonyOS Next 的仓颉编程模型中，自定义组件需要遵循特定的语法规则。

首先，自定义组件 te 缺少 @Component 装饰器的正确使用。组件类应该使用 @Component 装饰，并且 build 方法需要明确返回一个组件结构。此外，调用自定义组件时应该使用组件名作为函数调用，而不是直接调用 te()。

以下是修正后的代码示例：

@Entry
@Component
class EntryView {
    @State
    var message: String = "Hello Cangjie"
    func build() {
        Row {
            Column {
                Button(message).onClick {
                    evt => AppLog.info("Hello Cangjie")
                }.fontSize(40).height(80)
                Te()  // 修正为组件调用方式
            }.width(100.percent)
        }.height(100.percent)
    }
}

@Component
public class Te {  // 类名首字母建议大写
    func build() -> Column {
        Column() {
            Text("测试")
        }
    }
}

主要修改点：

  1. 将 te 重命名为 Te（遵循组件命名规范）
  2. 在 build() 方法中明确返回 Column 类型
  3. 调用时使用 Te() 而不是 te()

另外，请确保开发环境已更新到最新版本，某些宏扩展错误可能是由 IDE 或 SDK 版本不匹配导致的。

回到顶部