Question

In my current project utilizing Jetpack Compose, I m tasked with enabling users to input data while also providing functionality to style text with options like bold or italic upon clicking buttons. Given my novice level in Jetpack Compose, I m seeking guidance on how to implement this feature effectively.

 @Composable
 fun CustomTextField() {


var isBold by remember { mutableStateOf(false) }

val textState = remember { mutableStateOf(TextFieldValue()) }
val prevPos by remember { mutableStateOf(0) }

Column() {


    Button(onClick = {
        isBold = !isBold
    }) {
        Text(text = "Toggle Bold")
    }

    TextField(
        value = textState.value,
        onValueChange = {

            if (isBold) {
                val annotatedString = buildAnnotatedString {
                    append(it.text)

                    addStyle(
                        SpanStyle(fontWeight = FontWeight.Bold),
                        prevPos,
                        it.text.length
                    )
                }

                textState.value =  it.copy(annotatedString, it.selection, it.composition)
            } else {
                textState.value =  it
            }
        },
        textStyle = TextStyle(
            fontSize = 16.sp,
            lineHeight = 24.sp,
            color = Color.Black
        ),
        modifier = Modifier
            .padding(16.dp)
            .clip(MaterialTheme.shapes.medium)
            .background(MaterialTheme.colors.surface)
    )
    }

 }

我正试图通过这段话,但我的全文在纽顿被点击后,会取得大胆的选票。

Answer 1

根据你提供的情况。我认为,这比你更好的解决办法。

You dont have to use the buildAnnotatedString
You should be use the style within the TextField is base practice

Note: I am using Material3

该守则是:

var isBold by remember { mutableStateOf(false) }
val textState = remember { mutableStateOf("") }
StackoverflowTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column {
            Button(onClick = {
                isBold = !isBold
            }) {
                Text(text = "Toggle Bold")
            }
            TextField(
                value = textState.value,
                onValueChange = {
                    textState.value = it
                },
                textStyle = MaterialTheme.typography.bodyMedium.copy(
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    color =  Color.Black,
                    fontWeight = if (isBold) FontWeight.Bold else FontWeight.Normal
                ),
                modifier = Modifier
                    .padding(16.dp)
                    .clip(MaterialTheme.shapes.medium)
                    .background(MaterialTheme.colorScheme.surface)
            )
        }
    }
}

Here is render result:

友情链接