compose-multiplatform电商应用：跨平台电商UI实现
项目地址: https://gitcode.com/GitHub_Trending/co/compose-multiplatform 痛点：多平台电商应用开发的挑战
你是否还在为不同平台（Android、iOS、Web、Desktop）重复编写相似的电商UI界面而烦恼？传统开发模式下，每个平台都需要独立开发团队，代码复用率低，维护成本高，用户体验不一致。
使用JetBrains Compose Multiplatform，你可以用一套Kotlin代码构建跨平台的电商应用，实现真正的"一次编写，处处运行"。
读完本文你能得到
- ✅ Compose Multiplatform电商应用架构设计
- ✅ 跨平台商品列表、购物车、支付流程实现
- ✅ 状态管理和数据流处理最佳实践
- ✅ 多平台适配和性能优化技巧
- ✅ 完整的电商应用示例代码
Compose Multiplatform电商架构设计
核心电商组件实现
商品数据模型
data class Product(
val id: Long,
val name: String,
val price: Double,
val currency: String,
val imageUrl: String,
val description: String,
val category: String,
val inStock: Boolean,
val rating: Double,
val reviewCount: Int
)
data class CartItem(
val product: Product,
val quantity: Int,
val selected: Boolean = true
)
购物车状态管理
class CartViewModel(
private val snackbarManager: SnackbarManager,
productRepository: ProductRepository
) : JetSnackCartViewModel() {
private val _cartItems = MutableStateFlow(productRepository.getCart())
val cartItems: StateFlow<List<CartItem>> get() = _cartItems
fun addToCart(product: Product) {
val existingItem = _cartItems.value.find { it.product.id == product.id }
if (existingItem != null) {
updateQuantity(product.id, existingItem.quantity + 1)
} else {
_cartItems.value = _cartItems.value + CartItem(product, 1)
}
snackbarManager.showMessage("已添加到购物车")
}
fun removeFromCart(productId: Long) {
_cartItems.value = _cartItems.value.filter { it.product.id != productId }
}
fun updateQuantity(productId: Long, quantity: Int) {
_cartItems.value = _cartItems.value.map {
if (it.product.id == productId) it.copy(quantity = quantity) else it
}
}
val totalPrice: StateFlow<Double> = _cartItems.map { items ->
items.sumOf { it.product.price * it.quantity }
}.stateIn(viewModelScope, SharingStarted.WhileSubscribed(), 0.0)
}
商品列表组件
@Composable
fun ProductGrid(
products: List<Product>,
onProductClick: (Product) -> Unit,
onAddToCart: (Product) -> Unit
) {
LazyVerticalGrid(
columns = Adaptive(180.dp),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items(products) { product ->
ProductCard(
product = product,
onClick = { onProductClick(product) },
onAddToCart = { onAddToCart(product) }
)
}
}
}
@Composable
fun ProductCard(
product: Product,
onClick: () -> Unit,
onAddToCart: () -> Unit
) {
Card(
onClick = onClick,
modifier = Modifier
.fillMaxWidth()
.height(280.dp)
) {
Column {
AsyncImage(
model = product.imageUrl,
contentDescription = product.name,
modifier = Modifier
.fillMaxWidth()
.height(180.dp)
.clip(MaterialTheme.shapes.medium),
contentScale = ContentScale.Crop
)
Column(modifier = Modifier.padding(12.dp)) {
Text(
text = product.name,
style = MaterialTheme.typography.bodyLarge,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Text(
text = "$${product.price}",
style = MaterialTheme.typography.titleMedium,
color = MaterialTheme.colorScheme.primary
)
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.fillMaxWidth()
) {
RatingBar(rating = product.rating)
IconButton(onClick = onAddToCart) {
Icon(Icons.Default.AddShoppingCart, "添加到购物车")
}
}
}
}
}
}
多平台适配策略
平台特定代码组织
// commonMain - 共享代码
expect fun getPlatformName(): String
// androidMain - Android实现
actual fun getPlatformName(): String = "Android"
// iosMain - iOS实现
actual fun getPlatformName(): String = "iOS"
// desktopMain - Desktop实现
actual fun getPlatformName(): String = "Desktop"
// wasmJsMain - Web实现
actual fun getPlatformName(): String = "Web"
响应式布局设计
@Composable
fun ResponsiveProductLayout(
products: List<Product>,
onProductClick: (Product) -> Unit,
onAddToCart: (Product) -> Unit
) {
val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp
if (screenWidth < 600.dp) {
// 手机布局
LazyColumn {
items(products) { product ->
ProductListItem(
product = product,
onClick = { onProductClick(product) },
onAddToCart = { onAddToCart(product) }
)
}
}
} else if (screenWidth < 900.dp) {
// 平板布局
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
items(products) { product ->
ProductCard(
product = product,
onClick = { onProductClick(product) },
onAddToCart = { onAddToCart(product) }
)
}
}
} else {
// 桌面布局
LazyVerticalGrid(columns = GridCells.Adaptive(200.dp)) {
items(products) { product ->
ProductCard(
product = product,
onClick = { onProductClick(product) },
onAddToCart = { onAddToCart(product) }
)
}
}
}
}
电商功能模块对比表
| 功能模块 | Android实现 | iOS实现 | Web实现 | Desktop实现 | 共享程度 |
|---|---|---|---|---|---|
| 商品列表 | ✅ Compose | ✅ Compose | ✅ Compose | ✅ Compose | 100% |
| 购物车 | ✅ Compose | ✅ Compose | ✅ Compose | ✅ Compose | 100% |
| 支付流程 | 🔄 平台API | 🔄 平台API | 🔄 平台API | 🔄 平台API | 业务逻辑共享 |
| 用户认证 | 🔄 平台SDK | 🔄 平台SDK | 🔄 平台SDK | 🔄 平台SDK | 接口抽象 |
| 推送通知 | 🔄 平台服务 | 🔄 平台服务 | ❌ Web推送 | 🔄 平台服务 | 平台特定 |
性能优化实践
图片加载优化
@Composable
fun OptimizedProductImage(
imageUrl: String,
contentDescription: String,
modifier: Modifier = Modifier
) {
val imageLoader = rememberImageLoader()
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.crossfade(true)
.diskCachePolicy(CachePolicy.ENABLED)
.memoryCachePolicy(CachePolicy.ENABLED)
.size(Size.ORIGINAL)
.build(),
contentDescription = contentDescription,
imageLoader = imageLoader,
modifier = modifier,
contentScale = ContentScale.Crop,
onLoading = { /* 显示加载指示器 */ },
onError = { /* 显示错误占位符 */ }
)
}
列表性能优化
@Composable
fun OptimizedProductList(products: List<Product>) {
LazyColumn {
items(
items = products,
key = { it.id } // 关键：使用唯一键提高性能
) { product ->
ProductListItem(product = product)
}
}
}
构建和部署流程
实战：完整的电商应用搭建步骤
-
项目初始化
./gradlew init -
配置多平台支持
// build.gradle.kts kotlin { androidTarget() ios() jvm("desktop") wasmJs { browser() } } -
实现共享业务逻辑
// commonMain中实现商品、购物车、订单等核心逻辑 -
平台特定适配
// 各平台main中实现支付、推送等平台特定功能 -
测试和调试
# 测试所有平台 ./gradlew test -
构建和发布
# 构建所有平台 ./gradlew build
总结与展望
Compose Multiplatform为电商应用开发带来了革命性的变化：
核心优势：
- 🚀 代码复用率高达80-90%
- ⚡ 一致的跨平台用户体验
- 🔧 统一的开发工具链
- 📱 快速迭代和发布
适用场景：
- 中小型电商应用
- 创业公司MVP开发
- 需要快速多平台覆盖的项目
- 技术团队希望降低维护成本
随着Compose Multiplatform生态的不断完善，跨平台电商开发将变得更加高效和便捷。现在就开始使用Compose Multiplatform构建你的下一个电商应用吧！
下一步行动：
- 克隆示例项目进行学习
- 尝试将现有电商项目迁移到Compose Multiplatform
- 加入社区获取最新资讯和技术支持
点赞/收藏/关注三连，获取更多Compose Multiplatform实战教程！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
