Jetpack Compose Text(color = Color.***) 更改颜色答案

【问题标题】：Jetpack Compose Text(color = Color.***) Change colorJetpack Compose Text(color = Color.***) 更改颜色
【发布时间】：2022-10-25 18:17:57
【问题描述】：

我有 2 个单选按钮来更改文本的文本颜色（红色文本，硬编码）。

但我无法让 Text(color = Color.color TextRadio) 工作。

我知道它说它是一个字符串，但我该让红色或绿色转换为颜色。

如果我在代码中做了一些可能会更好的事情，请告诉我，因为我是初学者。

 @Composable
fun MainScreen() {

    /**
     * Text
     */
    var text by remember {
        mutableStateOf("test")
    }

    // Event handler
    val onTextChange = { value: String ->
        text = value
    }

    /**
     * Colors
     */

    val colors = listOf("Red", "Green")

    var colorsTextRadio by remember {
        mutableStateOf(colors[0])
    }
    // Event Handler
    val onTextColorChange = { value: String ->
        colorsTextRadio = value
    }

    Log.d("TAG", "MainScreen: colorsTextRadio $colorsTextRadio")


    Column(modifier = Modifier.padding(6.dp)) {
        TextField(value = text, onValueChange = onTextChange)

        Text(text = text.replace("\n", " "), maxLines = 1, color = Color.Red)

        RadioButtonGroup(colors = colors, colorsTextRadio = colorsTextRadio, onClick = onTextColorChange)

    }
}


@Composable
fun RadioButtonGroup(
    colors: List<String>,
    colorsTextRadio: String,
    onClick: (String) -> Unit
) {
    Column(modifier = Modifier.selectableGroup()) {
        colors.forEach { label ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (colorsTextRadio == label),
                        onClick = { onClick.invoke(label) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    modifier = Modifier.padding(end = 16.dp),
                    selected = (colorsTextRadio == label),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(text = label)
            }
        }
    }
}

【问题讨论】：

标签： android kotlin android-jetpack-compose android-radiobutton

【解决方案1】：

您可以定义一个数据类：

data class ColorLabel(
    val label: String,
    val color: Color
)

val colors = listOf(
    ColorLabel("Red",Red),
    ColorLabel("Green", Green))

var colorsTextRadio by remember { mutableStateOf(colors[0].label) }
var colorsText by remember { mutableStateOf(colors[0].color) }

然后将它们应用到您的 Composables：

  Text(text = text.replace("
", " "),
        maxLines = 1,
        color = colorsText)

    Column(modifier = Modifier.selectableGroup()) {
        colors.forEach { colorlabel->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (colorsTextRadio == colorlabel.label),
                        onClick = {
                            colorsTextRadio = colorlabel.label
                            colorsText = colorlabel.color
                                  },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    modifier = Modifier.padding(end = 16.dp),
                    selected = (colorsTextRadio == colorlabel.label),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(text = colorlabel.label)
            }
        }
    }

【讨论】：