Jetpack Compose - 通过可组合回调传递 object

Question

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

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

Detailscreen 具有脚手架和应用程序栏，并调用 DetailScreenContents()，后者具有两个 TextField 和一个按钮。

我希望用户在这些字段中输入文本，然后按下按钮，该按钮会将 package 文本转换为NOTE object。我的问题是，如何将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))
      }
      
  }

}

Answer 1

你可以使用 state 吊装。 使用 lambda 表达式是最常见的提升 state 的方式。

好的，这里是DetailScreenContent() ，说

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

我们实际上并没有返回任何东西，但我们正在将 state 提升到层次结构中。 现在，在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（类似于一个数据 class 左右，正在传递哪种类型的 object，明白了吗？）

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