如何把原生View扩展为Kuikly自定义组件从平台桥接到Kotlin DSL的完整指南【免费下载链接】KuiklyUI基于KMP技术的高性能、全平台开发框架具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本仓库为Github仓库镜像PR或Issue请移步至Github发起感谢支持项目地址: https://gitcode.com/Tencent-TDS/KuiklyUIKuikly 是基于 KMPKotlin Multiplatform技术的高性能、全平台开发框架支持一套代码库覆盖 Android、iOS、鸿蒙、H5 与微信小程序。当框架内置组件无法满足业务需求或你想复用团队已有的原生 View 时Kuikly 自定义组件扩展机制允许你只写一次 Kotlin DSL 代码就把它暴露给所有平台使用。本文将带你完整走通「原生 View → Kuikly DSL → Compose 组件」的全流程。为什么需要 Kuikly 自定义组件Kuikly 已封装了Text、Image、List等常用组件但在真实业务中你经常会遇到想复用公司已有的原生 UI 组件如自研的图片加载控件需要平台专属能力例如 iOS 的毛玻璃、鸿蒙的 ArkUI 特效想让自己的组件同时支持传统 DSL 写法和 Compose 写法。Kuikly 的扩展机制正好解决这些问题Kotlin 侧只写一次组件定义各平台只需实现一个薄桥接层即可让组件在所有端可用。总体路线三层结构一图看懂一个完整的 Kuikly 自定义组件由三层组成层位置职责Kuikly DSL 层commonMainKotlin定义组件名、属性Attr、事件Event和调用方法原生桥接层Android / iOS / 鸿蒙 / H5 / 小程序把原生 View 暴露给 Kotlin 侧响应 setProp / call使用层业务代码通过 DSL 扩展函数或 Compose 组件直接调用详细设计与实现步骤可参考官方文档expand-native-ui.md。第一步在 Kuikly 侧定义 DSL 组件四件套一个 Kuikly 组件由四个部分组成viewName对应原生组件名、Attr属性集、Event事件集和组件自身方法。以官方 Demo 中的MyDemoCustomView为例核心代码非常简洁internal class MyDemoCustomView : GroupViewMyDemoCustomViewAttr, MyDemoCustomViewEvent() { override fun viewName(): String KRMyDemoCustomView override fun createAttr() MyDemoCustomViewAttr().apply { overflow(true) } override fun createEvent() MyDemoCustomViewEvent() } internal fun ViewContainer*, *.MyDemoCustom(init: MyDemoCustomView.() - Unit) { addChild(MyDemoCustomView(), init) }viewName()返回的字符串就是与原生侧对齐的「组件名」MyDemoCustom { }则是供业务侧调用的声明式入口。完整示例见MyDemoCustomView.kt。::: 小贴士Attr 方法通过message with msg把属性透传给原生侧Event 通过register(onMyViewTapped)注册原生回调。第二步各平台实现原生桥接层Kotlin 侧的属性、事件最终都会落到原生 View 的setProp处理属性与事件和call处理方法调用两个入口。各平台只需继承/实现对应的基类Android继承原生 View 并实现IKuiklyRenderViewExport接口iOS继承UIImageView等原生类并遵循KuiklyRenderViewExportProtocol协议类名必须与viewName()一致Swift 类需加objc鸿蒙继承KuiklyRenderBaseView实现setProp、call与createArkUIViewH5 / 微信小程序实现IKuiklyRenderViewExport接口操作实际的 DOM 节点。各平台的详细代码与宏说明如 iOS 的KUIKLY_SET_CSS_COMMON_PROP都在 expand-native-ui.md 中跟着做即可。第三步注册组件正式“曝光”给 Kuikly原生 View 写完后还需要注册。Android 侧在实现了KuiklyRenderViewDelegatorDelegate的类中重写registerExternalRenderView即可renderViewExport(KRMyDemoCustomView.VIEW_NAME) { context - KRMyDemoCustomView(context) }Demo 工程中的注册入口可参考ContextCodeHandler.kt。iOS 侧组件通过运行时暴露无需手动注册鸿蒙侧则在IKuiklyViewDelegate的getCustomRenderViewCreatorRegisterMap中返回映射。第四步进阶把 DSL 组件包装成 Compose 组件如果你的业务使用 Kuikly Compose可以通过MakeKuiklyComposeNode一行把 DSL 组件桥接为Composable原子组件如视频、地图继承DeclarativeBaseViewviewName()返回原生组件名容器组件可挂载子节点继承ViewContainer使用带content的容器重载。Composable fun KuiklyCard(modifier: Modifier Modifier, content: Composable () - Unit) { MakeKuiklyComposeNodeKuiklyCard( factory { KuiklyCard() }, modifier modifier, content content ) }⚠️ 注意不能把ComposeView子类传入factory否则布局 frame 无法传递视图将不可见。API 参数详解见extend-kuikly-dsl-ui.md两步总览见extend-native-ui.md。实战示例参考清单官方 Demo 内置了完整可运行的跨端示例建议对照阅读资料路径DSL 组件定义三端对齐MyDemoCustomView.ktAndroid 桥接与注册KRMyDemoCustomView.ktiOS 桥接实现KRMyDemoCustomView.h框架内置组件参考实现core/views/扩展原生 View 官方文档expand-native-ui.md组件市场与生态扩展component_market.md常见问题与最佳实践类名不匹配iOS / 鸿蒙侧的组件名必须与 Kotlin 侧viewName()返回值完全一致否则桥接失败。异步回调View 方法支持传入回调函数异步返回结果但不支持同步返回值。二进制数据View 方法不支持直接传二进制图片等内容请 Base64 编码后以 JSON 传递或改用 Module 方法。覆盖内置组件注册同名viewName即可覆盖框架内置组件Demo 中MyModalView覆盖KRModalView就是这种做法。属性防抖原生侧setProp中建议先比较新旧值再赋值避免重复加载。小结Kuikly 自定义组件扩展的完整流程只有四步定义 DSL 四件套 → 各平台实现桥接 → 注册暴露 → 可选包装为 Compose 组件。借助 KMP 统一代码库一次编写即可在 Android、iOS、鸿蒙、H5 和微信小程序多端复用。跟着 expand-native-ui.md 的示例动手实现第一个自定义组件你将解锁 Kuikly 最强大的平台复用能力。【免费下载链接】KuiklyUI基于KMP技术的高性能、全平台开发框架具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本仓库为Github仓库镜像PR或Issue请移步至Github发起感谢支持项目地址: https://gitcode.com/Tencent-TDS/KuiklyUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考