能否将MutableState<T>作为参数传递给Composable组件？

背景 #

我之前开发SwiftUI项目，现在学习Jetpack Compose以将iOS应用移植到安卓，希望在遵循最佳实践的同时，尽量贴近原SwiftUI的写法。

SwiftUI的@Binding实现方式 #

在SwiftUI中，子视图通过@Binding变量共享父视图的@State状态，传递时使用$符号，示例代码如下：

struct ContentView: View {
    @State private var isOn = false  // 父视图状态
    
    var body: some View {
        VStack {
            ToggleView(isOn: $isOn)  // 向子视图传递Binding
            
            Text(isOn ? "开关已打开" : "开关已关闭")
        }
        .padding()
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool  // 用于更新父视图状态的Binding属性
    
    var body: some View {
        Toggle("开关", isOn: $isOn)  // 使用Binding
            .padding()
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Jetpack Compose官方推荐的单向数据流写法 #

Jetpack Compose官方文档推荐单向数据流模式，通过传递状态值和回调函数实现子视图更新父状态，示例代码如下：

@Composable
fun ContentView() {
    var isOn by remember { mutableStateOf(false) }  // 父视图状态

    Column(modifier = Modifier.padding(16.dp)) {
        ToggleView(isOn = isOn, onToggle = { isOn = it })  // 传递状态和回调
        
        Text(text = if (isOn) "开关已打开" else "开关已关闭")
    }
}

@Composable
fun ToggleView(isOn: Boolean, onToggle: (Boolean) -> Unit) {  // 接收状态和回调
    Switch(
        checked = isOn,  // 读取状态
        onCheckedChange = onToggle  // 触发回调更新父状态
    )
}

@Preview
@Composable
fun PreviewContentView() {
    ContentView()
}

这种写法虽然合规，但我觉得为每个可更新状态都添加Lambda回调过于繁琐且容易出错，因此尝试直接传递整个MutableState对象，示例代码如下：

@Composable
fun ContentView() {
    val isOnState = remember { mutableStateOf(false) }  // 父视图状态
    var isOn by isOnState

    Column(modifier = Modifier.padding(16.dp)) {
        ToggleView(isOnState = isOnState)  // 传递MutableState对象
        
        Text(text = if (isOn) "开关已打开" else "开关已关闭")
    }
}

@Composable
fun ToggleView(isOnState: MutableState<Boolean>) {  // 接收MutableState对象
    var isOn by isOnState
    Switch(
        checked = isOn,  // 读取状态
        onCheckedChange = { isOn = it }  // 直接修改MutableState
    )
}

@Preview
@Composable
fun PreviewContentView() {
    ContentView()
}

这种写法看似可行，但我不确定是否存在潜在问题，因此有两个疑问：

1. 我是否忽略了潜在的问题？
2. 为更好地模拟SwiftUI的状态绑定方式，传递MutableState<T>作为参数是否可行？

疑问解答 #

1. 传递MutableState的潜在问题 #

直接传递MutableState<T>确实存在不少隐患：

• 破坏单向数据流原则：子视图直接修改父级状态，状态变更的轨迹变得模糊，调试时难以追踪状态修改的发起方，在复杂界面中更容易出现状态不一致的问题。
• 降低子视图复用性：子视图依赖具体的MutableState类型，无法适配其他来源的状态（比如ViewModel中通过StateFlow转换而来的State），同时单元测试时需要Mock整个MutableState对象，增加测试复杂度。
• 可能引发不必要的重组：虽然Compose的重组机制是智能的，但直接持有父级的MutableState可能导致子视图在父级其他状态变更时触发意外重组，影响性能。
• 违背状态封装理念：Compose推荐将状态的所有权和修改逻辑集中在合适的层级（如父视图、ViewModel），子视图仅负责展示和触发事件，下放状态修改权会导致状态管理混乱，不利于项目长期维护。

2. 传递MutableState是否可行？ #

从技术角度来说，这种写法是可行的，Compose并没有禁止直接传递MutableState，也确实能快速模拟SwiftUI的@Binding效果。但不推荐在生产环境或复杂项目中使用，随着项目规模扩大，状态管理的维护成本会急剧上升。

如果想要贴近SwiftUI的绑定体验，同时遵循Compose的最佳实践，可以自己封装类似Binding的类型：

class Binding<T>(
    val value: T,
    val setValue: (T) -> Unit
)

// 扩展函数：将MutableState转换为Binding
fun <T> MutableState<T>.asBinding() = Binding(value, ::value::set)

// 使用示例
@Composable
fun ContentView() {
    val isOnState = remember { mutableStateOf(false) }
    val isOnBinding = isOnState.asBinding()

    Column(modifier = Modifier.padding(16.dp)) {
        ToggleView(isOn = isOnBinding)
        Text(text = if (isOnState.value) "开关已打开" else "开关已关闭")
    }
}

@Composable
fun ToggleView(isOn: Binding<Boolean>) {
    Switch(
        checked = isOn.value,
        onCheckedChange = isOn.setValue
    )
}

这种封装既保留了SwiftUI中Binding的简洁写法，又遵循了单向数据流原则，子视图仍通过回调修改状态，同时提升了子视图的复用性和可测试性。

内容的提问来源于stack exchange，提问作者Arturo Velázquez Jiménez