如何快速上手Decompose：5步构建你的第一个跨平台计数器应用

如何快速上手Decompose：5步构建你的第一个跨平台计数器应用

【免费下载链接】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库，专为构建具有路由功能和可插拔UI的生命周期感知业务逻辑组件（BLoC）而设计。它灵感来源于Badoo的RIBs框架，支持Jetpack Compose、SwiftUI、JS React等多种UI框架，让开发者能够轻松创建跨平台应用。

1. 准备开发环境

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

• Kotlin 1.9.0或更高版本
• Android Studio 2023.1或更高版本
• 适当的iOS开发环境（Xcode 14+）

克隆Decompose仓库到本地：

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

2. 添加Decompose依赖

在你的项目中添加Decompose依赖。打开项目的build.gradle.kts文件，添加以下依赖项：

implementation("com.arkivanov.decompose:decompose:2.2.0") implementation("com.arkivanov.decompose:extensions-compose-jetbrains:2.2.0")

这些依赖将提供Decompose的核心功能以及JetBrains Compose扩展，让你能够轻松地将Decompose与Compose UI结合使用。

3. 创建业务逻辑组件

Decompose的核心概念是组件（Component）。让我们创建一个简单的计数器组件。首先，定义一个接口：

interface Counter { val count: Value<Int> fun increment() fun decrement() }

然后实现这个接口：

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

这个组件使用了Decompose的ComponentContext，它提供了生命周期管理、状态保存等功能。Value和MutableValue是Decompose提供的可观察数据类型，用于在UI和业务逻辑之间传递状态。

Decompose组件结构示意图，展示了逻辑层、组件外观和UI之间的关系

4. 实现路由功能

Decompose提供了强大的路由功能，让你可以轻松管理应用中的屏幕导航。创建一个根组件，用于管理计数器组件的导航：

class CounterRootComponent( componentContext: ComponentContext ) : CounterRoot, ComponentContext by componentContext { private val router: Router<ChildConfiguration, Child> = router( initialConfiguration = ChildConfiguration(index = 0, isBackEnabled = false), handleBackButton = true, childFactory = ::resolveChild ) override val routerState: Value<RouterState<*, Child>> = router.state private fun resolveChild(configuration: ChildConfiguration, componentContext: ComponentContext): Child = Child( inner = CounterInnerComponent(componentContext, index = configuration.index), isBackEnabled = configuration.isBackEnabled ) override fun onNextChild() { router.push(ChildConfiguration(index = router.state.value.backStack.size + 1, isBackEnabled = true)) } override fun onPrevChild() { router.pop() } @Parcelize private data class ChildConfiguration(val index: Int, val isBackEnabled: Boolean) : Parcelable }

这个根组件使用了Decompose的Router来管理子组件的导航。routerState属性提供了当前的路由状态，包括当前活动的子组件和返回栈。

5. 创建跨平台UI

Decompose的一大优势是支持多种UI框架。下面是使用Jetpack Compose实现的计数器UI：

@Composable fun CounterUi(counter: Counter, onNext: () -> Unit, onPrev: () -> Unit, isBackEnabled: Boolean) { Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text( text = "Counter: ${counter.count.value}", fontSize = 24.sp ) Spacer(modifier = Modifier.height(16.dp)) Row( horizontalArrangement = Arrangement.spacedBy(8.dp) ) { Button(onClick = { counter.decrement() }) { Text("-") } Button(onClick = { counter.increment() }) { Text("+") } } Spacer(modifier = Modifier.height(16.dp)) Button(onClick = onNext) { Text("Next") } Spacer(modifier = Modifier.height(8.dp)) Button( onClick = onPrev, enabled = isBackEnabled ) { Text("Back") } } }

最后，将UI与组件连接起来：

@Composable fun CounterRootUi(root: CounterRoot) { Children(routerState = root.routerState) { child -> when (val instance = child.instance) { is CounterRoot.Child -> { CounterUi( counter = instance.inner.counter, onNext = root::onNextChild, onPrev = root::onPrevChild, isBackEnabled = instance.isBackEnabled ) } } } }

Decompose可插拔UI层次结构示意图，展示了逻辑层与不同UI框架的连接方式

运行你的跨平台计数器应用

完成以上步骤后，你可以在不同平台上运行你的应用：

• Android: 直接在Android Studio中运行
• iOS: 使用Xcode打开iOS项目并运行
• 桌面: 运行./gradlew run命令

Decompose计数器应用演示，展示了跨平台运行效果

总结

通过这5个简单步骤，你已经成功创建了一个使用Decompose的跨平台计数器应用。Decompose的组件化架构和路由功能使构建复杂的跨平台应用变得更加简单。你可以在sample/counter/shared/src/commonMain/kotlin/com/arkivanov/sample/counter/shared目录中找到完整的示例代码。

开始探索Decompose的更多功能，如状态保存、生命周期管理和高级路由功能，打造更加强大的跨平台应用吧！

【免费下载链接】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