Kotlin 处理合成层次 struct 中的深层按钮以切换视图

发布于11月28日

在 compose 层次 struct 中处理按钮点击的推荐方式是什么？我有一个列表，其中的项目旁边有一个编辑按钮.当用户点击按钮时，应用程序应该将该项目的视图更改为编辑器.

我想我可以将click处理函数向下传递到每个可组合对象，但这似乎不对，因为其他可组合对象只会将其传递给更深层次的对象.

对于这类案件，是否有既定的pattern人？

@Composable
fun App() {
    
    var isBrowsing = remember { mutableStateOf(true) }
    if (isBrowsing)    
        Browser() // <-- somewhere inside there is the "Edit" button
    } else {
        Editor() // <-- somewhere inside there is the "Exit" button
    }
    
}

推荐答案

请看一下this section in the documentation到CompositionLocal.它的目标是使某些值在整个可合成层次中可用，而无需在每个可合成层次中显式传递这些值.

在示例中，这主要用于与主题化相关的变量.但您可以try 将其修改为使用回调函数.然而，请注意，我不确定这是否是推荐的方法，这完全是一个实验，我不知道它是否会奏效.请try 以下代码，如果有效，请返回报告:

首先，将此变量放在可组合函数之外的某个位置:

val EditorCallback = compositionLocalOf<(Boolean) -> Unit> {}

然后将此代码添加到您的可组合组件中:

@Composable
fun App() {
    
    var isBrowsing by remember { mutableStateOf(true) }

    CompositionLocalProvider(LocalElevations provides { edit -> isBrowsing = !edit}) {
        if (isBrowsing)    
            Browser()
        } else {
            Editor()
        }
    }
}

@Composable
Editor() {
    Button(onClick = { EditorCallback.current(true) }) {
        Text(text = "EDIT")
    }
}

更安全的方法是控制反转.创建一个包含布尔值的ViewModel，并将此ViewModel插入到深度嵌套的Composable以及顶级Composable中，如下所示:

@Composable
fun App(myViewModel: MyViewModel = viewModel()) {
    
    if (myViewModel.isBrowsing)    
        Browser() // <-- somewhere inside there is the "Edit" button
    } else {
        Editor() // <-- somewhere inside there is the "Exit" button
    }
    
}

@Composable
Editor(myViewModel: MyViewModel = viewModel()) {
    Button(onClick = { myViewModel.isBrowsing = true }) {
        Text(text = "EDIT")
    }
}

除了这些建议之外，我认为在Compose中传递相当多的参数是可以接受的.最后，这提高了单个可组合组件的可测试性.