如何在Jetpack Compose中避免Prop Drilling（属性透传）

问题背景 #

我们先定义一个保持不可变性的自定义开关组件CustomSwitch，需要传入初始状态和切换回调：

@Composable
fun CustomSwitch(
    title: String? = null,
    checked: Boolean = false,
    onSwitchChanged: ((Boolean) -> Unit)? = null
){
    // 组件实现逻辑
}

当父组件PreferencesCard包含多个这类开关时，为了保持自身不可变性，需要把所有子组件的参数都暴露出来，导致参数列表臃肿，也就是声明式UI中典型的**Property Drilling（属性透传）**问题：

@Composable
fun PreferencesCard(
    switch1Title: String? = null,
    switch1Checked: Boolean = false,
    onSwitch1Changed: ((Boolean) -> Unit)? = null,
    switch2Title: String? = null,
    switch2Checked: Boolean = false,
    onSwitch2Changed: ((Boolean) -> Unit)? = null,
){
    CustomSwitch(switch1Title, switch1Checked, onSwitch1Changed)
    CustomSwitch(switch2Title, switch2Checked, onSwitch2Changed)
    // 其他子组件
}

这种写法弊端明显：子组件参数变更会波及所有上层父组件，维护成本高，且违背封装原则。

为简化参数列表，我们可以把状态和回调分别封装成数据类和接口：

data class PreferencesCardState(
    val switch1Title: String?, 
    val switch1Checked: Boolean, 
    val switch2Title: String?, 
    val switch2Checked: Boolean
)

interface PreferencesCardListener {
    fun onSwitch1Changed(b: Boolean)
    fun onSwitch2Changed(b: Boolean)
}

@Composable
fun PreferencesCard(
    state: PreferencesCardState,
    listener: PreferencesCardListener
){
    CustomSwitch(
        state.switch1Title, 
        state.switch1Checked, 
        { value -> listener.onSwitch1Changed(value) }
    )
    CustomSwitch(
        state.switch2Title, 
        state.switch2Checked, 
        { value -> listener.onSwitch2Changed(value) }
    )
    // 其他子组件
}

这种方式解决了参数臃肿问题，且不可变数据类是稳定的，Compose只会在状态实际变更时更新子组件。但新问题随之而来：每次PreferencesCard重组时，都会生成新的lambda实例，Compose会将lambda视为状态，导致所有CustomSwitch不必要地重组。

虽然可以通过传递方法引用替代lambda来避免这个问题，但方法引用通常指向ViewModel中的逻辑，仍需从根组件逐层传递，除非直接传递整个ViewModel（这是不推荐的不良实践）。

可行解决方案 #

方案1：使用CompositionLocal实现局部状态传递 #

CompositionLocal允许在Compose树的局部范围内传递数据，无需逐层显式传递参数，同时保持组件不可变性。

步骤1：定义CompositionLocal实例

// 定义状态和监听器的CompositionLocal
val LocalPreferencesCardState = compositionLocalOf<PreferencesCardState> {
    error("No PreferencesCardState provided")
}

val LocalPreferencesCardListener = compositionLocalOf<PreferencesCardListener> {
    error("No PreferencesCardListener provided")
}

步骤2：在父组件中提供CompositionLocal的值

@Composable
fun PreferencesScreen(viewModel: PreferencesViewModel) {
    val cardState = viewModel.cardState.collectAsState().value
    // 绑定ViewModel的方法实现监听器
    val cardListener = object : PreferencesCardListener {
        override fun onSwitch1Changed(b: Boolean) {
            viewModel.updateSwitch1(b)
        }

        override fun onSwitch2Changed(b: Boolean) {
            viewModel.updateSwitch2(b)
        }
    }

    // 提供CompositionLocal的值
    CompositionLocalProvider(
        LocalPreferencesCardState provides cardState,
        LocalPreferencesCardListener provides cardListener
    ) {
        PreferencesCard()
    }
}

步骤3：在PreferencesCard中使用CompositionLocal

@Composable
fun PreferencesCard(){
    val state = LocalPreferencesCardState.current
    val listener = LocalPreferencesCardListener.current

    // 使用方法引用替代lambda，确保回调稳定
    CustomSwitch(
        state.switch1Title, 
        state.switch1Checked, 
        listener::onSwitch1Changed
    )
    CustomSwitch(
        state.switch2Title, 
        state.switch2Checked, 
        listener::onSwitch2Changed
    )
    // 其他子组件
}

这样PreferencesCard不再需要接收状态和监听器参数，避免了Prop Drilling；同时方法引用保证了回调的稳定性，不会因lambda实例变化导致不必要的重组。

方案2：封装稳定的回调容器 #

如果不想使用CompositionLocal，可以将回调封装成稳定的类，结合remember确保实例不会在重组时频繁创建。

实现方式

// 用@Stable标记，告诉Compose这个类的属性是稳定的
@Stable
class PreferencesCardCallbacks(
    val onSwitch1Changed: (Boolean) -> Unit,
    val onSwitch2Changed: (Boolean) -> Unit
)

@Composable
fun PreferencesScreen(viewModel: PreferencesViewModel) {
    val cardState = viewModel.cardState.collectAsState().value
    // 使用remember保存回调实例，确保重组时不会重新创建
    val callbacks = remember {
        PreferencesCardCallbacks(
            onSwitch1Changed = viewModel::updateSwitch1,
            onSwitch2Changed = viewModel::updateSwitch2
        )
    }

    PreferencesCard(state = cardState, callbacks = callbacks)
}

@Composable
fun PreferencesCard(
    state: PreferencesCardState,
    callbacks: PreferencesCardCallbacks
){
    // 直接传递稳定的回调引用
    CustomSwitch(
        state.switch1Title, 
        state.switch1Checked, 
        callbacks.onSwitch1Changed
    )
    CustomSwitch(
        state.switch2Title, 
        state.switch2Checked, 
        callbacks.onSwitch2Changed
    )
    // 其他子组件
}

通过remember保存回调容器实例，确保其在组件生命周期内稳定；@Stable注解让Compose能正确识别回调的稳定性，避免不必要的重组。

关键注意事项 #

• 始终保持状态不可变性：使用不可变数据类存储状态，确保Compose能准确识别状态变化。
• 保证回调稳定性：优先使用方法引用或稳定的回调容器，避免在重组时创建新的lambda实例。
• 合理使用CompositionLocal：仅在局部组件树需要共享数据时使用，避免滥用导致组件耦合度升高。

内容的提问来源于stack exchange，提问作者Mister Smith