booleen
booleen
  • 发布:2025-04-20 09:16
  • 更新:2025-04-20 09:16
  • 阅读:112

鸿蒙标准uts插件,自定义native-view,builder.ets是个builder,没法存储自己的状态

分类:uni-app x

@Builder
export function buildButton(params: ESObject) {
Button(params.text, { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.onClick(() => {
params.onClick()
})
.attributeModifier(params.attributeUpdater)
}

如果我是个画布,需要定义context怎么处理,例如下面的代码:

import { qrcodegen } from '@ohos/qr-code-generator'  

@Builder  
export function buildButton(params: ESObject) {  
//我要咋办  
        SimpleContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))  
//我要咋办,CanvasRenderingContext2D目前,如果从paams传递过来例如params.SimpleContex,  
//会提示缺少CanvasRenderingContext2D接口的某些属性,编译不通过  

  QRCode(params.text)  
    .width(200)  
    .height(200)  
    .color("#000")  // 设置二维码颜色‌:ml-citation{ref="7" data="citationList"}  
    .backgroundColor("#fff") // 设置背景色‌:ml-citation{ref="7" data="citationList"}  
      .onClick(() => {  
          params.onClick()  
      })  
    .attributeModifier(params.attributeUpdater)  

     Canvas(params.SimpleContext).width('80%').height("50%")  
              .onReady(() => {  
                let qrcode: qrcodegen.QrCode = qrcodegen.QrCode.encodeText(params.text, qrcodegen.QrCode.Ecc.MEDIUM)  
                qrcode.drawCanvas(8, 1, params.SimpleContext)  
              })  
}

//#################################
//import { CanvasRenderingContext2D, UniNativeViewElement, UniNativeViewEvent, UTSJSONObject } from "@dcloudio/uni-app-x-runtime";
//编译后的CanvasRenderingContext2D缺少鸿蒙CanvasRenderingContext2D需要的部分属性

index.uts


import { BuilderNode} from "@kit.ArkUI"  
import { util } from '@kit.ArkTS';// 标准导入语法‌:ml-citation{ref="1,6" data="citationList"}  

import { scanCore,generateBarcode } from '@kit.ScanKit';  // 标准导入语法‌:ml-citation{ref="1,2" data="citationList"}  
import { image } from '@kit.ImageKit';  // 官方图像处理模块‌:ml-citation{ref="1" data="citationList"}  
// 导入混编实现的声明式UI构建函数  
import { buildButton } from "./builder.ets"  
import { INativeButtonContext } from "../interface.uts"  

// 定义 buildButton 的参数类型  
interface NativeButtonOptions {  
    text : string  
    SimpleContext:CanvasRenderingContext2D  
    onClick : () => void  
}  

export class NativeButton {  
    private $element : UniNativeViewElement;  
    public base64Str:string="";  
    private builder : BuilderNode<[NativeButtonOptions]> | null = null  
//#################################  
//import { CanvasRenderingContext2D, UniNativeViewElement, UniNativeViewEvent, UTSJSONObject } from "@dcloudio/uni-app-x-runtime";  
//编译后的CanvasRenderingContext2D缺少鸿蒙CanvasRenderingContext2D需要的部分属性  

    private  SimpleContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))  
    // 初始化 buildButton 默认参数  
    private params : NativeButtonOptions = {  
        text: '',  
        SimpleContext:this.SimpleContext,  
        onClick: () => {  
            this.$element.dispatchEvent(new UniNativeViewEvent("customClick", {}))  
        }  
    }  
    // async getQrBase64() {  
    //     const pixelMap = await generateBarcode.createBarcode(this.,{  
    //       scanType: scanCore.ScanType.QR_CODE,  
    //       width: 200,  
    //       height: 200  
    //     });   

    //     const imagePacker = image.createImagePacker();  
    //     const buffer = await imagePacker.packing(pixelMap, {   
    //       format: 'image/jpeg',  
    //       quality: 50   
    //     });  

    //     this.base64Str = new util.Base64Helper()  
    //       .encodeToStringSync(new Uint8Array(buffer));  
    //   }  

    constructor(element : UniNativeViewElement) {  
        // 绑定 wrapBuilder 函数  
        this.builder = element.bindHarmonyWrappedBuilder(wrapBuilder<[NativeButtonOptions]>(buildButton), this.params)  
        this.$element = element  
        // 绑定当前实例为自定义的controller,方便其他地方通过 element 获取使用  
        this.$element.bindHarmonyController(this)  
    }  

    updateText(text : string) {  
        this.params.text = text  
        // 调用 builder update 函数来更新 UI  
        this.builder?.update(this.params)  
    }  
}  

class NativeButtonContext implements INativeButtonContext {
private controller : NativeButton
constructor(element : UniNativeViewElement) {
// 获取自定义的 controller
this.controller = element.getHarmonyController<NativeButton>()!
}
updateText(text : string) {
// 调用 controller 来更新文字
this.controller?.updateText(text)
}
}

项目放在附件里面了

2025-04-20 09:16 负责人:无 分享
已邀请:

要回复问题请先登录注册