ViewModel 使用指引

在复杂应用开发中，将 UI 逻辑与业务逻辑分离是一个良好的实践。ViewModel 模式可以帮助你：

• 分离关注点：将数据处理和业务逻辑从 UI 层中抽离
• 状态管理：集中管理页面状态，避免状态分散
• 生命周期感知：ViewModel 可以感知页面生命周期，自动清理资源
• 代码复用：业务逻辑可以在不同 UI 组件间复用

Kuikly DSL 中使用 ViewModel

Kuikly DSL 中使用 ViewModel 需要引入扩展库kuiklyx-viewmodel。

接入依赖

repositories {
    maven { url = uri("https://mirrors.tencent.com/repository/maven/MLivePlatform") }
    maven { url = uri("https://mirrors.tencent.com/repository/maven/MLivePlatform-SNAPSHOT") }
}

在kuikly模块 build.gradle.kts 中添加依赖：

// 请将 ${KOTLIN_VERSION} 替换为项目对应的 Kotlin 版本
// 目前支持的 Kotlin 版本有：1.6.21, 1.7.20, 1.9.22, 1.9.23-dev-218, 2.0.21
sourceSets {
    val commonMain by getting {
        dependencies {
            implementation("com.tencent.kuiklyx:viewmodel:1.0.0-${KOTLIN_VERSION}")
        }
    }
}

创建 ViewModel

继承 ViewModel 类来创建你的 ViewModel。ViewModel 本身也是一个 PagerScope，所以在构造时需要传入 pagerId：

import com.tencent.kuiklyx.viewmodel.ViewModel

class CounterViewModel(override val pagerId: String) : ViewModel() {
    
    // 使用响应式字段管理状态
    var count by observable(0)
    
    // 业务方法
    fun increment() {
        count++
    }
    
    fun decrement() {
        count--
    }
    
    fun reset() {
        count = 0
    }
    
    // 生命周期回调
    override fun onResumed() {
        super.onResumed()
        // 页面恢复时执行的逻辑
    }
    
    override fun onPaused() {
        super.onPaused()
        // 页面暂停时执行的逻辑
    }

    override fun onCleared() {
        super.onCleared()
        // 清理资源，如取消网络请求、释放监听器等
    }
}

在页面中使用 ViewModel

通过 viewModelStore 委托在 Pager 或 ComposeView 中获取 ViewModel 实例：

@Page("CounterPage")
class CounterPage : Pager() {
    
    // 通过 viewModelStore 获取 ViewModel 实例
    val viewModel by viewModelStore {
        CounterViewModel(pagerId)
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                backgroundColor(Color.WHITE)
                allCenter()
            }
            
            // 显示计数值
            Text {
                attr {
                    text(ctx.viewModel.count.toString())
                    fontSize(32f)
                    fontWeightBold()
                }
            }
            
            // 操作按钮
            View {
                attr {
                    flexDirectionRow()
                    marginTop(20f)
                }
                
                Button {
                    attr {
                        titleAttr { text("-1") }
                    }
                    event {
                        click { ctx.viewModel.decrement() }
                    }
                }
                
                Button {
                    attr {
                        marginLeft(10f)
                        marginRight(10f)
                        titleAttr { text("重置") }
                    }
                    event {
                        click { ctx.viewModel.reset() }
                    }
                }
                
                Button {
                    attr {
                        titleAttr { text("+1") }
                    }
                    event {
                        click { ctx.viewModel.increment() }
                    }
                }
            }
        }
    }
}

class CounterView : ComposeView<ComposeAttr, ComposeEvent>() {
    
    val viewModel by viewModelStore {
        CounterViewModel(pagerId)
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                allCenter()
            }
            
            Text {
                attr {
                    text("计数: ${ctx.viewModel.count}")
                    fontSize(24f)
                }
            }
            
            Button {
                attr {
                    marginTop(16f)
                    titleAttr { text("增加") }
                }
                event {
                    click { ctx.viewModel.increment() }
                }
            }
        }
    }
}