Jetpack撰写文本样式(划线、下划线)问题

我面临着一些意想不到的事情 TextStyle 在Jetpack Compose中应用不同样式时的行为。

这是我的代码:

@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")
        }
    }
}

我注意到,如果我去掉高度和 verticalScroll 从 Box 可组合使用,效果很好。但是,我需要固定的滚动高度。

如何解决这个问题?