Loading...
Loading...
Compose DSL 混用 Kuikly DSL 完整开发助手。指导如何在 Compose DSL 页面中嵌入 Kuikly DSL 组件(DeclarativeBaseView / ViewContainer)及在 Compose 中调用 Kuikly Module。当用户需要在 Compose 页面中复用 Kuikly DSL 组件、封装原生 View 为 Composable、在 Compose 中调用 Kuikly Module时使用。
npx skill4agent add tencent-tds/kuiklyui-ai kuikly-compose-interop-dsl⚠️ 注意:本 skill 仅适用于 Compose DSL 中混用 Kuikly DSL(即在 Compose 页面中嵌入 Kuikly DSL 组件),不支持反向在 Kuikly DSL 中混用 Compose DSL。
ComposeContainerPagerwillInit()setContent {}import com.tencent.kuikly.compose.ComposeContainer
import com.tencent.kuikly.compose.setContent
import com.tencent.kuikly.core.annotations.Page
@Page("myPage")
class MyPage : ComposeContainer() {
override fun willInit() {
super.willInit()
setContent { MyScreen() }
}
}ComposeContainerPagerwillInitcreatedpageDidAppearpageDidDisappearpageWillDestroyDeclarativeBaseView@Composable
fun <T : DeclarativeBaseView<*, *>> MakeKuiklyComposeNode(
factory: () -> T,
modifier: Modifier,
viewInit: T.() -> Unit = {}, // 创建时调用一次
viewUpdate: (T) -> Unit = {}, // 每次重组时调用
measurePolicy: MeasurePolicy = KuiklyDefaultMeasurePolicy
)import androidx.compose.runtime.Composable
import com.tencent.kuikly.compose.extension.MakeKuiklyComposeNode
import com.tencent.kuikly.compose.ui.Modifier
import com.tencent.kuikly.core.views.VideoPlayControl
import com.tencent.kuikly.core.views.VideoView
@Composable
fun Video(src: String, playControl: VideoPlayControl, modifier: Modifier = Modifier) {
MakeKuiklyComposeNode<VideoView>(
factory = { VideoView() },
modifier = modifier,
viewInit = { getViewAttr().run { src(src); playControl(playControl) } },
viewUpdate = { it.getViewAttr().run { src(src); playControl(playControl) } },
)
}ViewContainer@Composable
fun <T : DeclarativeBaseView<*, *>> MakeKuiklyComposeNode(
factory: () -> T,
modifier: Modifier,
content: @Composable () -> Unit, // 子内容插槽
viewInit: T.() -> Unit = {},
viewUpdate: (T) -> Unit = {},
measurePolicy: MeasurePolicy = DefaultColumnMeasurePolicy
)import com.tencent.kuikly.core.base.ViewContainer
import com.tencent.kuikly.core.base.ContainerAttr
import com.tencent.kuikly.core.base.Event
import com.tencent.kuikly.core.base.ViewConst
class KuiklyCard : ViewContainer<ContainerAttr, Event>() {
override fun createAttr() = ContainerAttr()
override fun createEvent() = Event()
override fun viewName() = ViewConst.TYPE_VIEW
fun setup(cornerRadius: Float = 12f, onClick: (() -> Unit)? = null) {
attr { borderRadius(cornerRadius) }
onClick?.let { event { click { onClick() } } }
}
}
@Composable
fun KuiklyCard(
modifier: Modifier = Modifier,
cornerRadius: Float = 12f,
onClick: (() -> Unit)? = null,
content: @Composable () -> Unit,
) {
MakeKuiklyComposeNode<KuiklyCard>(
factory = { KuiklyCard() },
modifier = modifier,
viewInit = { setup(cornerRadius, onClick) },
viewUpdate = { it.setup(cornerRadius, onClick) },
content = content,
)
}| 场景 | 基类 |
|---|---|
| 原子组件(无子节点) | |
| 容器组件(有子节点) | |
| ❌ 禁止 | |
ComposeView// ❌ 编译通过但运行时不可见
class MyView : ComposeView<ComposeAttr, ComposeEvent>() { ... }
MakeKuiklyComposeNode<MyView>(factory = { MyView() }, ...)
// ✅ 原子组件用 DeclarativeBaseView
// ✅ 容器组件用 ViewContainerviewInitviewUpdateLocalActivity.current.getPager()acquireModuleimport com.tencent.kuikly.compose.ui.platform.LocalActivity
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.module.RouterModule
@Composable
fun MyScreen() {
val pager = LocalActivity.current.getPager() as Pager
val router = pager.acquireModule<RouterModule>(RouterModule.MODULE_NAME)
// 使用 router.openPage("targetPage", params) / router.closePage() 等
}找不到时抛异常;acquireModule找不到时返回 null。getModule