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.