如何将 AlertDialog 与 Jetpack Compose 中的导航组件集成？

Question

我正在使用 Jetpack Compose 和 Android 导航组件。当我在带有 的屏幕上时AlertDialog，我无法返回。我猜这是由于AlertDialog捕获了后退按钮事件。但是我不知道如何连接AlertDialog到导航组件？有没有官方的方法或最佳实践来做到这一点？这是我的代码：

// sample with a screen and a "navigate to dialog" button.
// once the button is pressed, an AlertDialog is shown.
// Using the back button while the AlertDialog is open has no effect ):    

@Composable
fun MyNavHost(navController: NavHostController, modifier: Modifier = Modifier) {
    NavHost(
        navController = navController,
        startDestination = "start_route",
        modifier = modifier
    ) {
        composable("start_route") {
            Text("start screen")
        }
        
        // this is my screen with the dialog
        dialog("dialog_route") {
            AlertDialog(
                onDismissRequest = {  /*TODO*/ }, // guess I need to connect this to the navigation component? bug how?
                title = {
                    Text(text = "Dialog title")
                },
                text = {
                    Text(text = "I am a dialog")
                },
                buttons = {}
            )
        }
    }
}


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MyJetpackComposeTheme {
                val navController = rememberNavController()

                Scaffold() { innerPadding ->

                    Column {
                        Button(onClick = { navController.navigate("dialog_route") }) {
                            Text("navigate to dialog")
                        }
                        MyNavHost(navController, modifier = Modifier.padding(innerPadding))
                    }
                }
            }
        }
    }
}

Answer 1

根据文档dialog：​

仅当此对话框代表应用程序中的一个单独屏幕，该屏幕需要自己的生命周期和保存的状态，独立于导航图中的任何其他目标时，这才适用。对于诸如 之类的用例，您应该直接在想要显示该对话框的目标AlertDialog中使用这些 API 。composable

dialog因此，您根本不应该使用目的地：dialog目的地专门且仅用于提供content常规Dialog. 您的代码实际上正在做的是创建一个空的Dialog（即，您不会在传递给的 lambda 中发出任何可组合项dialog，然后创建另一个AlertDialog堆叠在该空的顶部的dialog。这不是您想要做的。

相反，您应该遵循AlertDialog文档并直接创建AlertDialog您想要使用它的位置，设置您自己的布尔值以决定何时显示/隐藏它。