Как по -разному стилизовать часть текста в JetPack Compose ⇐ Android

[Anonymous]

Я пытаюсь повторить пользовательский интерфейс в JetPack Compose, где я отображаю инструкцию, такую ​​как: < /p>
1. Click the button below to copy the one time code.

Вот требования к стилю:

Число 1. должно быть в другом цвете, больше по размеру. жирный.@Composable
fun StepItem(number: String, text: String, styleCode: String) {
Row(verticalAlignment = Alignment.Top, modifier = Modifier.padding(start = 20.dp)) {
Text(
text = number,
style = MaterialTheme.typography.bodyMedium.copy(
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.colorScheme.primary,
fontSize = 20.sp
),
)
Text(
buildAnnotatedString {
append(text)
withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
append(styleCode)
}
},
style = MaterialTheme.typography.bodyMedium
)
}
}

ожидаемый вывод

фактический выход

update
Я попробовал часть кода, и он сработал.
Row {
Text(
text = "1.",
style = MaterialTheme.typography.bodyMedium.copy(
fontWeight = FontWeight.SemiBold,
color = MaterialTheme.colorScheme.primary,
fontSize = 25.sp
),
)

Spacer(modifier = Modifier.width(MaterialTheme.spacing.spaceExtraSmall))

// Main text with partial bold styling
Text(
buildAnnotatedString {
append("Click the button below to copy the ")
withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
append("one time code")
}
append(".")
},
style = MaterialTheme.typography.bodyMedium.copy(
baselineShift = BaselineShift(-0.4f),
)
)
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ck-compose