HarmonyOS 鸿蒙Next中cangjie开发调用自定义Component组件的回调函数在Index中报错

HarmonyOS 鸿蒙Next中cangjie开发调用自定义Component组件的回调函数在Index中报错

@Component
public class PanelComponent {
    @State var outSetValue: Float32 = 0.0
    @State var title: String = ''
    @State var min: Float64 = 0.0
    @State var max: Float64 = 0.0
    @State var step: Float64 = 0.0
    private var timer : Option<Timer> = None
    public func callback(value:Float64, mode: SliderChangeMode){};


    public func build(){
        Column(){
            Text(this.title)
            .width(Constants.PANEL_WIDTH)
            .padding( left: Constants.TITLE_PADDING )
            .fontSize(Constants.FONT_SIZE)
            .fontWeight(FontWeight.Medium)
            .fontColor(@r(app.color.font_color))
            .margin( left: Constants.TITLE_MARGIN_HORIZONTAL,
                    right: Constants.TITLE_MARGIN_HORIZONTAL )
            Column() {
                  Slider(min:this.min, max: this.max, step:this.step, style: SliderStyle.InSet)
                    .layoutWeight(Constants.LAYOUT_WEIGHT)
                    .selectedColor(Constants.SLIDER_SKIN)
                    .onChange({value: Float64, mode: SliderChangeMode =>
                        this.callback(value, mode)
                    })
                    .margin( left: Constants.SLIDER_MARGIN_HORIZONTAL,
                      right: Constants.SLIDER_MARGIN_HORIZONTAL )

func build() {
    Column() {
        Image(@rawfile("windmill.png"))
        .objectFit(ImageFit.Contain)
        .width(Constants.IMAGE_SIZE)
        .height(Constants.IMAGE_SIZE)
        .rotate(
            x: RotatePosition.X,
            y: RotatePosition.Y,
            z: RotatePosition.Z,
            angle: this.angle,
            )
        .scale(x:this.imageSize, y:this.imageSize)
        Row().height(Constants.WEIGHT_BLANK_IMAGE)
        PanelComponent(title:"速度", min:SliderSpeed.MIN, max:SliderSpeed.MAX, step: SliderSpeed.STEP).callback(value,mode){
            this.timer?.cancel()
            this.timer = Timer.repeat(Duration.millisecond*100, Duration.millisecond*100, { =>
            spawn(Main){this.angle += Float32(value) } })
        }

报错macro evaluation has failed for macro call ‘Component’，应该如何调整？


更多关于HarmonyOS 鸿蒙Next中cangjie开发调用自定义Component组件的回调函数在Index中报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

尝试如下修改

@Component
public class PanelComponent {
    @Prop title: string = ''
    @Prop min: number = 0
    @Prop max: number = 0
    @Prop step: number = 0
    @Prop onChange?: (value: number, mode: SliderChangeMode) => void // 声明回调属性

    build() {
        Column() {
            Slider({ min: this.min, max: this.max, step: this.step })
                .onChange((value: number, mode: SliderChangeMode) => {
                    this.onChange?.(value, mode) // 触发父组件回调
                })
        }
    }
}

build() {
    PanelComponent({
        title: "速度",
        min: SliderSpeed.MIN,
        max: SliderSpeed.MAX,
        step: SliderSpeed.STEP,
        onChange: (value: number, mode: SliderChangeMode) => {
            this.timer?.cancel()
            this.timer = Timer.repeat(Duration.millisecond*100, () => {
                spawn(Main) { this.angle += Float32(value) }
            })
        }
    })
}

更多关于HarmonyOS 鸿蒙Next中cangjie开发调用自定义Component组件的回调函数在Index中报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是仓颉语法么

鸿蒙仓颉语法

以下为修改处，不再报错，多了一个timer变量，callback()定义及调用修改。

@State var outSetValue: Float32 = 0.0
@State var min: Float64 = 0.0
@State var max: Float64 = 0.0
@State var step: Float64 = 0.0
private var callback:(value:Float64, mode: SliderChangeMode)-> Unit;

PanelComponent(mode:SliderMode.SPEED, title:@r(app.string.speed_text), outSetValue:this.angle, min:SliderSpeed.MIN, max:SliderSpeed.MAX, step: SliderSpeed.STEP,
callback:({value,mode =>
    this.timer?.cancel()
    this.timer = Timer.repeat(Duration.millisecond*100, Duration.millisecond*100, { =>
    spawn(Main){this.angle += Float32(value) } })}))

在HarmonyOS鸿蒙Next中，Cangjie开发调用自定义Component组件的回调函数在Index中报错，通常是由于组件未正确定义或回调函数签名不匹配导致。检查组件声明中是否使用@Component装饰器，确保回调参数类型与调用处一致。若使用@Builder或自定义构建函数，需确认函数作用域及参数传递正确性。

在PanelComponent中，回调函数callback需要定义为@ExternalFunction装饰器，并确保在调用时传递正确的参数类型。当前代码中callback在PanelComponent内部声明但未正确暴露给外部使用，导致Index中调用时报错。

调整方案：

  1. 在PanelComponent中，将callback声明为@ExternalFunction：
[@ExternalFunction](/user/ExternalFunction)
public callback?: (value: Float64, mode: SliderChangeMode) => void
  1. 在Index调用时，确保传递匹配的函数签名：
PanelComponent(
  title: "速度",
  min: SliderSpeed.MIN,
  max: SliderSpeed.MAX,
  step: SliderSpeed.STEP
)
.callback((value: Float64, mode: SliderChangeMode) => {
  // 处理逻辑
})

这样调整后，回调函数能够正确绑定，避免macro evaluation错误。

回到顶部