Jetpack Compose Navigation实现：单选组点击Select跳转对应门店页面

1. 提前配置导航路由 #

由于店铺名称包含空格、单引号这类特殊字符，直接作为路由会导致导航解析出错，建议先做一层名称到路由常量的映射，再在全局NavHost中注册所有页面对应的路由：

// 定义店铺名到路由的映射表
val storeRouteMap = mapOf(
    "Dollar Store" to "dollar_store",
    "Fred Myers" to "fred_myers",
    "Wall Mart" to "wall_mart",
    "SafeWay" to "safeway",
    "Sherm's" to "sherms",
    "CostCo" to "costco",
    "Other" to "other_store"
)

在应用顶层的NavHost中注册路由，注意navController不要在MyRadioGroup内部创建，应该由上层导航节点传入，避免导航栈不匹配的问题：

// 顶层导航配置示例
NavHost(navController = navController, startDestination = "store_select_page") {
    composable("store_select_page") { MyRadioGroup(navController) }
    // 依次注册所有店铺页面对应的路由
    composable("dollar_store") { DollarStorePage() }
    composable("fred_myers") { FredMyersPage() }
    composable("wall_mart") { WallMartPage() }
    // 剩余其他店铺页面同理注册即可
}

2. 替换Select按钮的点击逻辑 #

直接把按钮的TODO部分替换为导航跳转代码即可：

Button(onClick = {
    // 获取选中项对应的目标路由，兜底跳转至Other页面
    val targetRoute = storeRouteMap[selectedOption] ?: "other_store"
    // 执行跳转
    navController.navigate(targetRoute)
}) {
    Text(text = "Select")
}

3. 可选优化：修复布局适配问题 #

原有代码所有UI组件直接叠加在Scaffold外部，且写死了640dp的顶部padding，不同尺寸设备会出现显示异常，建议将所有内容放到Scaffold的content参数中，通过布局权重分配位置：

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text(stringResource(id = R.string.app_name)) },
        )
    }
) { innerPadding ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
            .padding(horizontal = 16.dp)
    ) {
        // 顶部提示文字区域
        Column(modifier = Modifier.padding(vertical = 24.dp)) {
            Text(text = "Select Store from List Below")
            Divider(modifier = Modifier.padding(vertical = 8.dp))
            Text(text = "Then push the 'Select'")
        }
        // 单选列表区域，占剩余可滚动空间
        Column(
            modifier = Modifier.weight(1f),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // 原有单选按钮的循环逻辑放在此处即可
        }
        // 底部Select按钮
        Button(
            onClick = { /* 上述跳转逻辑 */ },
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 24.dp)
        ) {
            Text(text = "Select")
        }
    }
}

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