电商App商品页组件化设计与MVVM实践

1. 项目背景与核心诉求在电商类App的开发过程中商品添加/修改页面与商品详情页往往存在大量重复的UI元素和业务逻辑。以我们最近开发的农产品交易平台为例商品编辑页需要展示的20个字段中有17个与详情页完全一致。这种重复不仅造成开发资源浪费更会导致后期维护困难——当产品经理要求调整商品规格展示方式时我们需要同时修改两个页面的代码。这个现象背后反映的是电商系统设计中一个经典问题如何优雅处理数据录入与数据展示的高度一致性需求。经过三个版本的迭代我们总结出一套组件化解决方案将共用部分的代码复用率提升到85%以上同时保持了两类页面业务逻辑的独立性。2. 技术方案设计思路2.1 组件化架构设计采用MVVM模式将页面拆分为三层数据层Repository统一商品数据获取接口interface ProductRepository { suspend fun getDetail(productId: String): Product suspend fun saveProduct(product: Product): Boolean }逻辑层ViewModelclass ProductViewModel(repository: ProductRepository) : ViewModel() { // 共用状态 val product MutableStateFlowProduct?(null) // 详情页独有逻辑 fun loadDetail(id: String) { /*...*/ } // 编辑页独有逻辑 fun saveProduct() { /*...*/ } }UI层Composable通过Slot插槽机制实现组件复用Composable fun ProductBasicInfoSection( product: Product, // 编辑模式特有参数 onFieldChanged: ((field: String, value: Any) - Unit)? null ) { // 共用UI实现... }2.2 差异点处理策略对于两页面的差异部分我们采用以下设计模式装饰器模式在详情页基础上扩展编辑功能fun ProductDetailPage() { ProductBasicInfoSection(product) // 详情页特有组件 ProductActionButtons() } fun ProductEditPage() { ProductBasicInfoSection( product, onFieldChanged { field, value - /* 处理字段变更 */ } ) // 编辑页特有组件 SaveButton() }策略模式根据页面类型切换交互逻辑val interactionMode remember { if (isEditMode) EditStrategy() else ViewStrategy() } TextField( value product.name, onValueChange { interactionMode.handleNameChange(it) }, enabled interactionMode.isFieldEditable )3. 具体实现步骤3.1 创建基础组件库定义共享数据模型data class Product( val id: String, val name: String, val price: Double, // 共17个共用字段... val specs: ListProductSpec )构建UI组件集// 商品基础信息卡片 Composable fun ProductBaseInfoCard(product: Product) { Column { Text(product.name, style MaterialTheme.typography.h5) PriceDisplay(price product.price) // 其他共用UI元素... } } // 规格参数表格 Composable fun ProductSpecsTable(specs: ListProductSpec) { LazyColumn { items(specs) { spec - SpecItemRow(spec) } } }3.2 实现页面组合逻辑详情页组合方式fun ProductDetailScreen(viewModel: ProductViewModel) { val product by viewModel.product.collectAsState() Scaffold { Column { ProductBaseInfoCard(product) ProductSpecsTable(product.specs) // 详情页特有元素 FavoriteButton() } } }编辑页组合方式fun ProductEditScreen(viewModel: ProductViewModel) { val product by viewModel.product.collectAsState() Scaffold { Column { ProductBaseInfoCard( product product, onNameChanged { viewModel.updateName(it) } ) EditableSpecsTable( specs product.specs, onSpecUpdate { viewModel.updateSpec(it) } ) // 编辑页特有元素 SubmitButton() } } }4. 状态管理与数据流4.1 统一状态管理方案采用MVI模式管理页面状态sealed class ProductState { object Loading : ProductState() data class Success(val product: Product) : ProductState() data class Error(val message: String) : ProductState() } class ProductViewModel : ViewModel() { private val _state MutableStateFlowProductState(Loading) val state: StateFlowProductState _state fun loadProduct(id: String) { viewModelScope.launch { _state.value Loading try { val product repository.getProduct(id) _state.value Success(product) } catch (e: Exception) { _state.value Error(e.message) } } } }4.2 编辑状态的特殊处理通过扩展字段实现编辑状态管理data class EditableProduct( val origin: Product, val changes: MapString, Any emptyMap() ) { val current: Product get() origin.copy().apply { changes.forEach { (field, value) - // 通过反射更新字段 javaClass.getField(field).set(this, value) } } }5. 性能优化实践5.1 组件级优化技巧避免不必要的重组Composable fun ProductImageGallery(images: ListImage) { LazyRow { items(images, key { it.id }) { image - StableImageItem(image) } } } Composable fun StableImageItem(image: Image) { // 使用remember保存计算结果 val dominantColor remember(image) { calculateDominantColor(image) } // ... }分块加载策略fun ProductDetailScreen() { val product by viewModel.product.collectAsState() LazyColumn { item { ProductBaseInfoCard(product) } item { ProductImageGallery(product.images) } item { if (product.specs.isNotEmpty()) { ProductSpecsTable(product.specs) } } // ... } }5.2 数据缓存策略实现两级缓存机制class ProductRepository( private val remote: RemoteDataSource, private val local: LocalDataSource ) { private val memoryCache mutableMapOfString, Product() suspend fun getProduct(id: String): Product { return memoryCache[id] ?: local.getProduct(id) ?: remote.getProduct(id).also { local.saveProduct(it) memoryCache[id] it } } }6. 测试方案设计6.1 组件测试策略共用组件测试用例Test fun productBaseInfoCard_displaysCorrectData() { composeTestRule.setContent { ProductBaseInfoCard(testProduct) } composeTestRule.onNodeWithText(testProduct.name).assertExists() composeTestRule.onNodeWithText(¥${testProduct.price}).assertExists() }交互测试用例Test fun editMode_updatesProductName() { val mockViewModel MockViewModel() composeTestRule.setContent { ProductEditScreen(mockViewModel) } composeTestRule.onNodeWithTag(product_name_field) .performTextInput(New Name) assertEquals(New Name, mockViewModel.updatedName) }6.2 页面级测试方案采用Page Object模式组测试class ProductDetailPage(composeTestRule: ComposeTestRule) { fun verifyBasicInfoDisplayed(): ProductDetailPage { composeTestRule.onNodeWithText(testProduct.name).assertExists() return this } fun clickEditButton(): ProductEditPage { composeTestRule.onNodeWithText(Edit).performClick() return ProductEditPage(composeTestRule) } } class ProductEditPage(composeTestRule: ComposeTestRule) { fun changeName(newName: String): ProductEditPage { composeTestRule.onNodeWithTag(name_field) .performTextInput(newName) return this } }7. 常见问题与解决方案7.1 状态同步问题现象在编辑页修改商品价格后返回详情页未立即更新解决方案// 在ViewModel中维护单一数据源 class ProductViewModel : ViewModel() { private val _product MutableStateFlowProduct?(null) val product: StateFlowProduct? _product fun updatePrice(newPrice: Double) { _product.update { it?.copy(price newPrice) } repository.saveProduct(_product.value) } }7.2 复杂表单验证需求编辑页需要验证多个字段的关联关系实现方案class ProductValidator { fun validate(product: Product): ValidationResult { return when { product.price 0 - Error(价格不能为负) product.stock 0 - Error(库存不能为负) product.specs.any { it.value.isEmpty() } - Error(规格参数不能为空) else - Success } } } // 在ViewModel中使用 viewModelScope.launch { when (val result validator.validate(product)) { is Error - _errorEvent.emit(result.message) Success - repository.saveProduct(product) } }8. 扩展性设计8.1 动态字段支持通过配置驱动UI生成data class FieldConfig( val key: String, val displayName: String, val type: FieldType, val isRequired: Boolean ) Composable fun DynamicFieldEditor( config: FieldConfig, value: Any, onValueChange: (Any) - Unit ) { when (config.type) { FieldType.TEXT - TextField( value value as String, onValueChange { onValueChange(it) } ) FieldType.NUMBER - NumberField( value value as Double, onValueChange { onValueChange(it) } ) // 其他字段类型... } }8.2 多平台适配方案通过expect/actual机制实现平台特定代码// 公共模块 expect fun getPlatformSpecificStyles(): ProductStyles // Android实现 actual fun getPlatformSpecificStyles(): ProductStyles { return AndroidProductStyles() } // iOS实现 actual fun getPlatformSpecificStyles(): ProductStyles { return IOSProductStyles() }在实际项目中这套架构使得我们新增一个商品属性字段的开发时间从平均2人日降低到0.5人日。当需要调整商品图片展示逻辑时现在只需修改一处代码即可同步更新所有相关页面。这种设计特别适合快速迭代的电商项目在保证功能完整性的同时显著提升了开发效率。