kotlin - 如何在 compose 中选择 4 个 Composabel 中的一个？

Question

假设我有四个Button或Composable连续，我想选择一个并取消选择另一个，不像单选按钮，但行为完全一样。

@Composable
fun ButtonSet(modifier: Modifier = Modifier) {
    Row(
        modifier = modifier
            .padding(start = 60.dp, end = 60.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,
    ) {

        val button1 = remember { mutableStateOf(false) }
        val button2 = remember { mutableStateOf(false) }
        val button3 = remember { mutableStateOf(false) }
        val button4 = remember { mutableStateOf(false) }

        val buttonList = listOf<Any>(button1, button2, button3, button4)

        val activeButton = remember {
            mutableStateOf(true)
        }

        if (button1.value || button2.value || button3.value || button4.value) {
            activeButton.value = false
        } else if (button1.value) {
            button1.value = !button1.value
        } else if (button2.value) {
            button2.value = !button2.value
        } else if (button3.value) {
            button3.value = !button3.value
        } else if (button4.value) {
            button4.value = !button4.value
        }

        GoalkeeperButton(button1.value)
        GoalkeeperButton(button2.value)
        GoalkeeperButton(button3.value)
        GoalkeeperButton(button4.value)
    }
}


@Composable
fun GoalkeeperButton(
    active: Boolean = false,
    @SuppressLint("ModifierParameter") modifier: Modifier = Modifier,
) {
    val buttonState = remember {
        mutableStateOf(active)
    }

    if (!buttonState.value) {
        ButtonUnActive() {}
    } else {
        ButtonActive()
    }
    RadioButton(selected =, onClick = { /*TODO*/ })
}


@Composable
fun ButtonActive(active: Boolean = true) {
    val button = painterResource(id = R.drawable.bttn_pressed)
    val gloves = painterResource(id = R.drawable.blue_hands)
    val buttonState = remember {
        mutableStateOf(active)
    }

    Column(
        modifier = Modifier
            .wrapContentWidth()
            .height(130.dp)
    ) {
        Image(
            painter = gloves,
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .size(width = 135.dp, height = 70.dp)
        )
        Image(
            painter = button,
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                .clickable(onClick = {})
                .size(width = 107.dp, height = 65.dp)
        )
    }
}

@Composable
fun ButtonUnActive(
    state: Boolean = false,
    onclick: () -> Unit,
) {
    val button = painterResource(id = R.drawable.bttn)
    var unActiveState by remember {
        mutableStateOf(state)
    }

    Image(
        painter = button,
        contentDescription = null,
        contentScale = ContentScale.FillBounds,
        modifier = Modifier
            .clickable(
                onClick = {
                    onclick()
                },
            )
            .size(width = 107.dp, height = 65.dp)
    )
}

这是我尝试过的，但我知道这是非常糟糕的代码，请提出更好和最好的方法。

标签： kotlinandroid-jetpack-compose