企业官网建设流程全解析

如何在Android、iOS和Web中使用Decompose：3个平台统一开发实战

【免费下载链接】DecomposeKotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.), inspired by Badoos RIBs fork of the Uber RIBs framework项目地址: https://gitcode.com/gh_mirrors/dec/Decompose

Decompose是一个功能强大的Kotlin Multiplatform库，它提供了生命周期感知的业务逻辑组件（BLoCs），并支持路由功能和可插拔UI（如Jetpack Compose、SwiftUI、JS React等）。本指南将展示如何在Android、iOS和Web三个平台上使用Decompose进行统一开发，帮助你快速构建跨平台应用。

Decompose核心优势：一次编码，多平台运行 🚀

Decompose的核心设计理念是将业务逻辑与UI分离，通过组件化架构实现跨平台代码复用。其主要优势包括：

• 真正的跨平台支持：支持Android、iOS、Web等多个平台
• 生命周期管理：自动处理组件生命周期，确保状态一致性
• 可插拔UI：适配不同平台的UI框架，保持业务逻辑统一
• 强大的路由功能：简化复杂应用的导航逻辑

图：Decompose的可插拔UI层次结构，展示了逻辑与UI的分离设计

快速开始：Decompose环境搭建

1. 准备工作

首先，确保你的开发环境满足以下要求：

• Kotlin 1.6.0+
• Android Studio Arctic Fox+
• Xcode 13+（iOS开发）
• Node.js 14+（Web开发）

2. 项目初始化

通过以下命令克隆Decompose仓库：

git clone https://gitcode.com/gh_mirrors/dec/Decompose

3. 添加依赖

Decompose的核心模块支持多种Kotlin Multiplatform目标，包括android、jvm、js、ios等。在你的build.gradle文件中添加以下依赖：

implementation("com.arkivanov.decompose:decompose:<version>")

根据需要添加UI扩展模块：

// Jetpack Compose (Android) implementation("com.arkivanov.decompose:extensions-compose-jetpack:<version>") // JetBrains Compose (多平台) implementation("com.arkivanov.decompose:extensions-compose-jetbrains:<version>") // Android Views implementation("com.arkivanov.decompose:extensions-android:<version>")

详细安装指南请参考官方文档：docs/getting-started/installation.md

Android平台实现：使用Jetpack Compose构建UI

1. 创建组件

Decompose的核心是组件（Component），每个组件包含业务逻辑和状态。创建一个简单的计数器组件：

class CounterComponent( componentContext: ComponentContext ) : ComponentContext by componentContext { private val _count = MutableValue(0) val count: Value<Int> = _count fun increment() { _count.value++ } fun decrement() { _count.value-- } }

2. 实现Compose UI

使用Jetpack Compose为Android平台创建UI：

@Composable fun CounterUi(component: CounterComponent) { val count by component.count.subscribeAsState() Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text(text = "Count: $count") Button(onClick = { component.increment() }) { Text("Increment") } Button(onClick = { component.decrement() }) { Text("Decrement") } } }

3. 运行效果

图：Decompose在Android平台上的计数器应用演示

iOS平台实现：使用SwiftUI集成

1. 共享业务逻辑

Decompose的业务逻辑是完全跨平台的，无需修改即可在iOS上使用。通过Kotlin/Native将组件暴露给Swift：

@ExportObjCClass class IosCounterComponent( componentContext: ComponentContext ) : CounterComponent(componentContext), KotlinCustomReflectable { // 必要的桥接代码 }

2. SwiftUI界面

在SwiftUI中使用Decompose组件：

struct CounterView: View { let component: IosCounterComponent var body: some View { VStack(spacing: 16) { Text("Count: \(component.count.value)") Button("Increment") { component.increment() } Button("Decrement") { component.decrement() } } } }

3. 主从视图示例

Decompose特别适合构建复杂的导航界面，如下所示的主从视图：

图：Decompose在iOS平台上的主从视图实现

Web平台实现：使用React集成

1. 设置JS目标

确保在build.gradle中启用JS目标：

kotlin { js(IR) { browser() binaries.executable() } }

2. 创建React组件

使用Kotlin/JS和React创建Web界面：

fun RBuilder.CounterUi(component: CounterComponent) { val count by component.count.observeAsState(0) div { h1 { +"Count: $count" } button { +"Increment" onClickFunction = { component.increment() } } button { +"Decrement" onClickFunction = { component.decrement() } } } }

3. Web应用效果

图：Decompose在Web平台上的主从视图应用演示

最佳实践与高级技巧

1. 组件通信

Decompose推荐使用回调和状态观察进行组件通信：

class ParentComponent( componentContext: ComponentContext ) : ComponentContext by componentContext { private val _child = MutableValue<ChildComponent?>(null) fun createChild() { _child.value = ChildComponent( componentContext = this, onResult = { result -> // 处理子组件返回的结果 } ) } }

2. 路由管理

Decompose的Router组件简化了导航逻辑：

val router = Router( initialConfiguration = { HomeConfig }, componentContext = componentContext, handleBackButton = true, childFactory = { config, componentContext -> when (config) { is HomeConfig -> HomeComponent(componentContext) is DetailConfig -> DetailComponent(componentContext, config.itemId) } } )

3. 状态保存与恢复

利用Essenty库提供的StateKeeper自动保存组件状态：

class MyComponent( componentContext: ComponentContext ) : ComponentContext by componentContext { private var count by stateKeeper.consume("count", savedStateHandle = savedStateHandle) { 0 } init { stateKeeper.register("count") { count } } }

总结：Decompose带来的跨平台开发革新

Decompose通过分离业务逻辑和UI，实现了真正的跨平台代码复用。无论是Android、iOS还是Web平台，你都可以使用相同的业务逻辑，配合平台特定的UI实现，快速构建高质量应用。

通过本文介绍的方法，你可以：

• 共享高达80%以上的业务逻辑代码
• 保持各平台原生的用户体验
• 简化复杂应用的状态和导航管理

如果你正在寻找一个能够真正实现跨平台统一开发的解决方案，Decompose绝对值得尝试！

查看更多示例代码：sample/ 官方文档：docs/

【免费下载链接】DecomposeKotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.), inspired by Badoos RIBs fork of the Uber RIBs framework项目地址: https://gitcode.com/gh_mirrors/dec/Decompose