Jetpack Compose 中的导航答案

【问题标题】：Navigation in Jetpack ComposeJetpack Compose 中的导航
【发布时间】：2021-09-03 02:07:28
【问题描述】：

我正在开发这个使用单选按钮的购物应用程序。客户应该能够选择一个单选按钮并通过单击“选择按钮”来选择它。谁能帮我开始。代码如下。

我希望这对每个人都有意义。我为每个单选按钮制作了一个页面。页面名称与按钮相同。

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

    val radioOptions = listOf(
        "Dollar Store", "Fred Myers",
        "Wall Mart", "SafeWay", "Sherm's", "CostCo", "Other"
    )
    val (selectedOption, onOptionSelected) = remember {
        mutableStateOf(radioOptions[1])
    }
    Scaffold() {

        TopAppBar(
            title = { Text(stringResource(id = R.string.app_name)) },
        )
    }
    Column(
        modifier = Modifier
            .padding(start = 16.dp, top = 160.dp)
    ) {
        Text(
            text = "Select Store from List Below")
        Divider()
        Text(
            text = "Then push the 'Select'")
    }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .padding(top = 8.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) }
                    )
                    .padding(horizontal = 16.dp)
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    modifier = Modifier
                        .padding(start = 16.dp, top = 12.dp),

                    onClick = {
                        onOptionSelected(text)

                    }
                )
                Text(
                    text = text,
                    modifier = Modifier.padding(start = 16.dp, top = 16.dp)
                )
            }
        }
    }
    Column(modifier = Modifier
        .padding(start = 24.dp, top = 640.dp)
    
    ) {
        Button(onClick = {
            TODO()


        }) {
            Text(text = "Select")

        }
        
    }
}

“选择”按钮位于代码底部附近。

【问题讨论】：

非常感谢您的回答。

标签： kotlin navigation android-jetpack-compose

【解决方案1】：

首先创建一个密封类 Screen 以将单选按钮文本链接到 Google 推荐的可组合项，如下所示：

sealed class Screen(val route: String, val label: String){
object MyRadioGroup: Screen(route = "myRadioGroup", label = "APP NAME")
object DollarStore: Screen(route = "Dollar Store", label = "Dollar Store")
object FreedMyers: Screen(route = "Fred Myers", label = "FreedMyers")}

然后修改NavHost或AnimatedNavHost（如果你使用伴奏者的NavigatioAnimatation库为：

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        val navController = rememberNavController()

        Surface(color = MaterialTheme.colors.background) {
            NavHost(navController = navController, startDestination = Screen.MyRadioGroup.route){
                composable(Screen.MyRadioGroup.route){
                    MyRadioGroup(navController = navController)
                }
                composable(Screen.DollarStore.route){
                    //Call here the associated composable function
                    DollarStore()
                }
                composable(Screen.FreedMyers.route){
                    //Call here the associated composable function
                    FreedMyers()
                }
            }
        }
    }
}}

最后添加一些代码到MyRadioGroup Composable

fun MyRadioGroup(navController: NavController) {
val radioOptions = listOf(
    "Dollar Store", "Fred Myers",
    "Wall Mart", "SafeWay", "Sherm's", "CostCo", "Other"
)
val (selectedOption, onOptionSelected) = remember {
    mutableStateOf(radioOptions[1])
}
Scaffold(
    topBar = {
        TopAppBar(
            title = { Text(stringResource(id = R.string.app_name)) },
        )
    }
) {
    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
        Column(
            modifier = Modifier.padding(start = 16.dp, top = 16.dp)
        ) {
            Text(text = "Select Store from List Below")
            Divider()
            Text(text = "Then push the 'Select'")
        }

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            radioOptions.forEach { text ->
                Row(
                    Modifier
                        .fillMaxWidth()
                        .padding(top = 8.dp)
                        .selectable(
                            selected = (text == selectedOption),
                            onClick = { onOptionSelected(text) }
                        )
                        .padding(horizontal = 16.dp)
                ) {
                    RadioButton(
                        selected = (text == selectedOption),
                        modifier = Modifier
                            .padding(start = 16.dp, top = 12.dp),
                        onClick = { onOptionSelected(text) }
                    )
                    Text(
                        text = text,
                        modifier = Modifier.padding(start = 16.dp, top = 16.dp)
                    )
                }
            }
        }
        Column(
            modifier = Modifier
                .padding(start = 24.dp, top = 24.dp)

        ) {
            Button(
                onClick = {
                    navController.navigate(selectedOption) //navigate to selected route
                }
            ) {
                Text(text = "Select")
            }
        }
    }
}}

【讨论】：