Jetpack Compose如何通过回调将Note对象从子可组合函数传给父组件

你可以通过给子组件DetailScreenContent添加返回Note对象的回调参数实现需求，这是Jetpack Compose中跨组件通信的标准高效方案，符合单向数据流的设计规范，修改逻辑如下：

1. 调整子组件DetailScreenContent的实现 #

首先删除你代码中无效的endnote状态（该状态仅会在初始化时赋值一次，不会跟随输入内容更新），新增类型为(Note) -> Unit的回调参数，点击完成按钮时直接用当前输入的标题和内容构造Note对象，传入回调函数即可。
修改后的代码：

@Composable
fun DetailScreenContent(onNoteSubmit: (Note) -> Unit, modifier: Modifier = Modifier) {
    val titleValue = remember { mutableStateOf("") }
    val contentValue = remember { mutableStateOf("") }

    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 = {
                    // 构造Note对象并通过回调传给父组件
                    val newNote = Note(
                        Title = titleValue.value,
                        Content = contentValue.value
                    )
                    onNoteSubmit(newNote)
                },
                shape = cardShapes.small
            ) {
                Text(text = stringResource(R.string.Finish))
            }
        }
    }
}

2. 父组件DetailScreen接收回调数据 #

在调用DetailScreenContent时传入回调实现，拿到Note对象后即可执行对应的业务逻辑，比如调用ViewModel保存笔记、返回上一页等，同时注意传入Scaffold的padding参数避免布局被顶部/底部栏遮挡：
修改后的代码：

@Composable
fun DetailScreen(navCtl : NavController, mviewmodel: NoteViewModel){
    Scaffold(
        bottomBar = { TidyBottomBar() },
        topBar = { 
            TidyAppBarnavIcon(
                mtitle = "",
                onBackPressed = { navCtl.popBackStack() }
            )
        }
    ) { paddingValues ->
        DetailScreenContent(
            modifier = Modifier.padding(paddingValues),
            onNoteSubmit = { newNote ->
                // 在这里处理拿到的Note对象，比如调用ViewModel保存
                mviewmodel.saveNote(newNote)
                // 保存完成后返回上一页
                navCtl.popBackStack()
            }
        )
    }
}

补充说明 #

这种回调方案的优势是组件耦合度极低，输入框的状态由子组件自己维护，父组件只需要关心业务处理逻辑，不需要感知下层的输入实现，符合Compose的设计规范。

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