Jetpack Compose - 通过可组合回调传递对象答案

【问题标题】：Jetpack Compose - pass an object through composable callbackJetpack Compose - 通过可组合回调传递对象
【发布时间】：2021-10-18 12:47:48
【问题描述】：

在这个应用程序中，我有一个屏幕，您可以在其中输入注释的标题和内容。

屏幕有两个可组合的DetailScreen()和DetailScreenContent。

Detailscreen 有脚手架和 appbars，并调用 DetailScreenContents()，它有两个 TextField 和一个按钮。

我希望用户在这些字段中输入文本，然后按下将文本打包到 NOTE 对象中的按钮。我的问题是，如何将 NOTE 传递给具有回调之类的 DETAILSCREEN() 的上部可组合项= onclick: -> 笔记或其他任何有效的方式？

@Composable
fun DetailScreen(navCtl : NavController, mviewmodel: NoteViewModel){

Scaffold(bottomBar = { TidyBottomBar()},
         topBar = { TidyAppBarnavIcon(
             mtitle = "",
             onBackPressed = {navCtl.popBackStack()},

         )
         }) {
    DetailScreenContent()
   }
}



@Composable
fun DetailScreenContent() {
val titleValue = remember { mutableStateOf("")}
val contentValue = remember { mutableStateOf("")}
val endnote by remember{ mutableStateOf(Note(
    Title = titleValue.value,
    Content = contentValue.value))}


Column(modifier = Modifier.fillMaxSize()) {

    OutlinedTextField(value = titleValue.value,
        onValueChange = {titleValue.value = it},
        singleLine = true,
        label = {Text("")}
    ,modifier = Modifier
            .fillMaxWidth()
            .padding(start = 3.dp, end = 3.dp),
        shape = cardShapes.small
    )

    OutlinedTextField(value = contentValue.value, onValueChange = {
        contentValue.value = it
    },
        label = {Text("Content")}
        ,modifier = Modifier
            .fillMaxWidth()
            .padding(start = 3.dp, end = 3.dp, top = 3.dp)
            .height(200.dp),
        shape = cardShapes.small,

    )

  Row(horizontalArrangement = Arrangement.End,
      modifier = Modifier.fillMaxWidth()){
      Button(onClick = {
                       /**return the object to the upper composable**/
      }, shape = cardShapes.small) {
          Text(text = stringResource(R.string.Finish))
      }
      
  }

}

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

您可以使用状态提升。使用 lambdas 是这里最常见的提升状态的方式。

好的，这里是DetailScreenContent()，说

fun DetailScreenContent(
processNote: (Note) -> Unit
){
 Button( onClick = { processNote(/*Object to be "returned"*/) }
}

我们并没有真正返回任何东西，而是将状态提升到层次结构中。现在，在DetailsScreen

fun DetailScreen(navCtl : NavController, mviewmodel: NoteViewModel){

Scaffold(bottomBar = { TidyBottomBar()},
         topBar = { TidyAppBarnavIcon(
             mtitle = "",
             onBackPressed = {navCtl.popBackStack()},

         )
         }) {
    DetailScreenContent(
        processNote = {note -> //This is the passed object
            /*Perform operations*/
        }
     )
   //You could also extract the processNote as a variable, like so
/*
 val processNote = (Note) {
 Reference the note as "it" here
 }
*/
   }
}

这里假设有一个类型Note（类似于数据类之类的东西，传递的是哪种类型的对象，明白了吗？）

这就是我们提升状态并将其提升到视图模型的方式。请记住，compose 在这里基于变量渲染状态，因此保留变量至关重要，确保它们不会被随意修改并从随机位置读取。一次应该只有一个变量实例，应该在必要时进行修改，并且应该从一个公共位置读取。这就是视图模型有用的地方。您将所有变量（状态）存储在视图模型中，并将读取和修改提升到那里。它必须充当应用程序的单一事实来源。

【讨论】：