android-jetpack-compose - 如何从子可组合项控制脚手架的 FloatingActionButton onClick？

Question

是否可以在 Scaffold 中设置 FloatingActionButton 的 onClick 的值，屏幕可由 组合NavHost，它也在 Scaffold 中？在我的示例中，我希望能够更改 FAB 的 onClick 以根据屏幕可组合项内的值 (name) 进行一些计算，而不会将值提升到 Scaffold 所在的可组合项 位于 (MyActivity())。

@Composable
fun MyActivity() {
    val navController = rememberNavController()

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { /* set this lambda from Screen1 */ }) { ... }
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = Screen.Screen1.route,
            modifier = Modifier.padding(paddingValues)
        ) {
            composable(route = Screen.Screen1.route) {
                Screen1()
            }
            ...
        }
    }
}

@Composable
fun Screen1() {
    var name by remember { mutableStateOf(TextFieldValue("") }

    TextField(value = name, onValueChange = { name = it })

    // Set FAB onClick to do some calculations on name without hoisting the variable
    setFabOnClick { name.calculate() }
}

Answer 1

我不确定您为什么不想将此值放在顶部 View 中。如果您在您的示例中这样做，更新文本将不会导致 MyActivity 的重组，只有 Screen1 - Compose 足够聪明，可以做到这一点。

在任何情况下，您都可以创建一个可变状态来存储处理程序并在 Screen1 中更新它。我使用 LaunchedEffect 因为更新状态是一个副作用，不应该直接从 View 构造函数完成，也没有必要在每次重组时都这样做。

@Composable
fun Screen1(
    setFabOnClick: (() -> Unit) -> Unit,
) {
    var name by remember { mutableStateOf(TextFieldValue("")) }

    TextField(value = name, onValueChange = {name = it})

    LaunchedEffect(Unit) {
        setFabOnClick { println("$name") }
    }
}

@Composable
fun MyActivity() {
    val navController = rememberNavController()
    val (fabOnClick, setFabOnClick) = remember { mutableStateOf<(() -> Unit)?>(null) }

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = {
                fabOnClick?.invoke()
            }) {
                Icon(Icons.Default.ReportProblem, null)
            }
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = Screen.Screen1.route,
            modifier = Modifier.padding(paddingValues)
        ) {
            composable(route = Screen.Screen1.route) {
                Screen1(setFabOnClick = setFabOnClick)
            }
        }
    }
}