Skip to Content

Text và Typography

Hướng dẫn sử dụng Text composable và Typography trong Compose Multiplatform.

Text cơ bản

@Composable fun BasicTexts() { Column { // Text đơn giản Text("Hello World") // Text với style Text( text = "Styled Text", fontSize = 24.sp, fontWeight = FontWeight.Bold, color = Color.Blue ) // Multiline text Text( text = "This is a very long text that will wrap to multiple lines when it exceeds the available width.", maxLines = 2, overflow = TextOverflow.Ellipsis ) } }

Material Typography

@Composable fun TypographyExamples() { Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { Text("Display Large", style = MaterialTheme.typography.displayLarge) Text("Display Medium", style = MaterialTheme.typography.displayMedium) Text("Display Small", style = MaterialTheme.typography.displaySmall) Text("Headline Large", style = MaterialTheme.typography.headlineLarge) Text("Headline Medium", style = MaterialTheme.typography.headlineMedium) Text("Headline Small", style = MaterialTheme.typography.headlineSmall) Text("Title Large", style = MaterialTheme.typography.titleLarge) Text("Title Medium", style = MaterialTheme.typography.titleMedium) Text("Title Small", style = MaterialTheme.typography.titleSmall) Text("Body Large", style = MaterialTheme.typography.bodyLarge) Text("Body Medium", style = MaterialTheme.typography.bodyMedium) Text("Body Small", style = MaterialTheme.typography.bodySmall) Text("Label Large", style = MaterialTheme.typography.labelLarge) Text("Label Medium", style = MaterialTheme.typography.labelMedium) Text("Label Small", style = MaterialTheme.typography.labelSmall) } }

Custom Typography

Định nghĩa Typography

// theme/Type.kt import androidx.compose.material3.Typography import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.sp val AppTypography = Typography( displayLarge = TextStyle( fontWeight = FontWeight.Bold, fontSize = 57.sp, lineHeight = 64.sp, letterSpacing = (-0.25).sp ), headlineLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 32.sp, lineHeight = 40.sp ), headlineMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 28.sp, lineHeight = 36.sp ), titleLarge = TextStyle( fontWeight = FontWeight.Medium, fontSize = 22.sp, lineHeight = 28.sp ), bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.sp ), labelLarge = TextStyle( fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 20.sp ) )

Text Styling

Font styling

@Composable fun StyledText() { Column { Text( text = "Bold Text", fontWeight = FontWeight.Bold ) Text( text = "Italic Text", fontStyle = FontStyle.Italic ) Text( text = "Underlined Text", textDecoration = TextDecoration.Underline ) Text( text = "Strikethrough", textDecoration = TextDecoration.LineThrough ) Text( text = "Combined Decorations", textDecoration = TextDecoration.combine( listOf(TextDecoration.Underline, TextDecoration.LineThrough) ) ) } }

Text alignment

@Composable fun TextAlignments() { Column(modifier = Modifier.fillMaxWidth()) { Text( text = "Left aligned (default)", modifier = Modifier.fillMaxWidth() ) Text( text = "Center aligned", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center ) Text( text = "Right aligned", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Right ) Text( text = "Justified text that spans multiple lines will be aligned to both left and right edges.", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Justify ) } }

AnnotatedString - Rich Text

@Composable fun RichText() { val annotatedString = buildAnnotatedString { append("This is ") withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append("bold") } append(" and this is ") withStyle(SpanStyle(color = Color.Red)) { append("red") } append(" and this is ") withStyle(SpanStyle( fontSize = 20.sp, fontStyle = FontStyle.Italic, color = Color.Blue )) { append("large blue italic") } } Text(text = annotatedString) }

Clickable text

@Composable fun ClickableText() { val annotatedString = buildAnnotatedString { append("By signing up, you agree to our ") pushStringAnnotation(tag = "terms", annotation = "https://example.com/terms") withStyle(SpanStyle(color = Color.Blue, textDecoration = TextDecoration.Underline)) { append("Terms of Service") } pop() append(" and ") pushStringAnnotation(tag = "privacy", annotation = "https://example.com/privacy") withStyle(SpanStyle(color = Color.Blue, textDecoration = TextDecoration.Underline)) { append("Privacy Policy") } pop() } ClickableText( text = annotatedString, onClick = { offset -> annotatedString.getStringAnnotations(tag = "terms", start = offset, end = offset) .firstOrNull()?.let { annotation -> // Open terms URL } annotatedString.getStringAnnotations(tag = "privacy", start = offset, end = offset) .firstOrNull()?.let { annotation -> // Open privacy URL } } ) }

Selectable Text

@Composable fun SelectableTextExample() { SelectionContainer { Column { Text("This text can be selected") Text("And this one too!") DisableSelection { Text("But this cannot be selected") } Text("Back to selectable") } } }

📝 Tóm tắt

PropertyMô tả
textNội dung hiển thị
fontSizeKích thước font
fontWeightĐộ đậm
fontStyleItalic/Normal
colorMàu chữ
textAlignCăn chỉnh
maxLinesSố dòng tối đa
overflowXử lý text dài
textDecorationUnderline/Strikethrough
styleMaterialTheme.typography.*

Tiếp theo

Học về Button và IconButton.

Last updated on