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
| Property | Mô tả |
|---|---|
text | Nội dung hiển thị |
fontSize | Kích thước font |
fontWeight | Độ đậm |
fontStyle | Italic/Normal |
color | Màu chữ |
textAlign | Căn chỉnh |
maxLines | Số dòng tối đa |
overflow | Xử lý text dài |
textDecoration | Underline/Strikethrough |
style | MaterialTheme.typography.* |
Tiếp theo
Học về Button và IconButton.
Last updated on