Jetpack Compose Text Styles(Strikethrough, Underline) issue

Question

I am facing some unexpected TextStyle behaviour while applying different styles in Jetpack Compose.

This is my code:

@Composable
fun TextDecorationExample() {
    var isUnderlined by remember { mutableStateOf(false) }
    var isStrikethrough by remember { mutableStateOf(false) }
    var isBold by remember { mutableStateOf(false) }
    var isItalic by remember { mutableStateOf(false) }

    val scrollState = rememberScrollState()

    Column(modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp) //Remove
                .border(2.dp, Color.White)
                .padding(10.dp)
                .verticalScroll(scrollState) //Remove
        ) {
            Text(
                text = "Hello, Jetpack Compose! " +
                        "This is a long text to demonstrate vertical scrolling. " +
                        "You can apply various text styles like underline, strikethrough, bold, and italic.",
                color = Color.White,
                style = TextStyle(
                    fontSize = 24.sp,
                    textDecoration = when {
                        isUnderlined && isStrikethrough -> TextDecoration.Underline + TextDecoration.LineThrough
                        isUnderlined -> TextDecoration.Underline
                        isStrikethrough -> TextDecoration.LineThrough
                        else -> null
                    },
                    fontWeight = if (isBold) FontWeight.Bold else FontWeight.Normal,
                    fontStyle = if (isItalic) FontStyle.Italic else FontStyle.Normal
                ),
                modifier = Modifier.padding(bottom = 16.dp)
            )
        }

        Button(onClick = { isUnderlined = !isUnderlined },
            colors = ButtonDefaults.buttonColors(
                contentColor = if (isUnderlined) Color.Black else Color.White,
                containerColor = if (isUnderlined) Color.Green else Color.Gray
            ),
            modifier = Modifier.padding(top = 8.dp)) {
            Text(text = "Underline")
        }

        Button(onClick = { isStrikethrough = !isStrikethrough },
            colors = ButtonDefaults.buttonColors(
                contentColor = if (isStrikethrough) Color.Black else Color.White,
                containerColor = if (isStrikethrough) Color.Green else Color.Gray
            ),
            modifier = Modifier.padding(top = 8.dp)) {
            Text(text = "Strikethrough")
        }

        Button(onClick = { isBold = !isBold },
            colors = ButtonDefaults.buttonColors(
                contentColor = if (isBold) Color.Black else Color.White,
                containerColor = if (isBold) Color.Green else Color.Gray
            ),
            modifier = Modifier.padding(top = 8.dp)) {
            Text(text = "Bold")
        }

        Button(onClick = { isItalic = !isItalic },
            colors = ButtonDefaults.buttonColors(
                contentColor = if (isItalic) Color.Black else Color.White,
                containerColor = if (isItalic) Color.Green else Color.Gray
            ),
            modifier = Modifier.padding(top = 8.dp)
        ) {
            Text(text =  "Italic")
        }
    }
}

I have noticed that if I remove height and verticalScroll from theBox Composable, it's working fine. However, I need fixed height with scroll.

How to resolve this?

Answer 1

It turns out that this issue is resolved by updating the dependencies.
It is enough to update your build.gradle to

val composeBom = platform("androidx.compose:compose-bom:2024.08.00")
implementation(composeBom)

or

implementation "androidx.compose.foundation:foundation:1.6.8"

respectively.