显示文本 | 集合 | Android 开发者

显示文本集合

通过自定义应用显示文本的方式，增强其可用性和美观性。

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}

设置文本部分的样式

设置文本部分的样式以提高可读性和增强用户体验。

指南

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        append("Go to ")

        // We attach this *URL* annotation to the following content
        // until `pop()` is called
        pushStringAnnotation(
            tag = "URL", annotation = "https://developer.android.com"
        )
        withStyle(
            style = SpanStyle(
                color = Color.Green, fontWeight = FontWeight.Bold
            )
        ) {
            append("Android Developers")
        }
        pop()

        append(" and check the ")

        pushStringAnnotation(
            tag = "URL", annotation = "https://developer.android.com/jetpack/compose"
        )
        withStyle(
            style = SpanStyle(
                color = Color.Blue, fontWeight = FontWeight.Bold
            )
        ) {
            append("Compose guidelines.")
        }
        pop()
    }

    ClickableText(text = annotatedText, onClick = { offset ->
        annotatedText.getStringAnnotations(
            tag = "URL", start = offset, end = offset
        ).firstOrNull()?.let { annotation ->
            // If yes, we log its value
            Log.d("Clicked URL", annotation.item)
        }
    })
}

在一个文本字符串中支持多个链接

在一个文本字符串中支持多个链接，为用户提供多种选择，并提高参与度。

指南

@Composable
fun LetterByLetterAnimatedText() {
    val text = "This text animates as though it is being typed \uD83E\uDDDE\u200D♀\uFE0F \uD83D\uDD10  \uD83D\uDC69\u200D❤\uFE0F\u200D\uD83D\uDC68 \uD83D\uDC74\uD83C\uDFFD"

    // Iterate over the characters.
    val breakIterator = remember(text) { BreakIterator.getCharacterInstance() }

    // Define the duration (milliseconds) of the pause before each successive
    // character is displayed. These pauses between characters create the
    // illusion of an animation.
    val typingDelayInMs = 50L

    var substringText by remember {
        mutableStateOf("")
    }
    LaunchedEffect(text) {
        // Initial start delay of the typing animation
        delay(1000)
        breakIterator.text = StringCharacterIterator(text)

        var nextIndex = breakIterator.next()
        // Iterate over the string, by index boundary
        while (nextIndex != BreakIterator.DONE) {
            substringText = text.subSequence(0, nextIndex).toString()
            // Go to the next logical character boundary
            nextIndex = breakIterator.next()
            delay(typingDelayInMs)
        }
    }
    Text(substringText)
}

在用户输入时逐个字符动画显示文本

在用户输入时逐个字符动画显示文本，以提高可读性和用户参与度。

指南

@Composable
fun DialogExamples() {
    // ...
    val openAlertDialog = remember { mutableStateOf(false) }

    // ...
        when {
            // ...
            openAlertDialog.value -> {
                AlertDialogExample(
                    onDismissRequest = { openAlertDialog.value = false },
                    onConfirmation = {
                        openAlertDialog.value = false
                        println("Confirmation registered") // Add logic here to handle confirmation.
                    },
                    dialogTitle = "Alert dialog example",
                    dialogText = "This is an example of an alert dialog with buttons.",
                    icon = Icons.Default.Info
                )
            }
        }
    }
}