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?
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.