Compose 中 显示文本和设置文本样式

98 阅读2分钟

在 Jetpack Compose 中,显示文本和设置文本样式是常见的任务,用于显示应用程序中的静态文本内容,并通过设置样式来调整文本的外观。Compose 提供了一系列的文本组件和函数,以便于显示文本内容,并支持丰富的文本样式设置。

显示文本

在 Compose 中,你可以使用 Text 组件来显示文本内容。下面是一个简单的示例:

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun MyText() {
    Text(text = "Hello, World!")
}

设置文本样式

你可以使用 TextStyle 对象来设置文本的样式,例如字体大小、字体样式、颜色等。然后,将这个样式对象传递给 Text 组件的 style 参数。

下面是一个设置文本样式的示例:

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

@Composable
fun StyledText() {
    Text(
        text = "Hello, World!",
        style = TextStyle(
            fontSize = 20.sp,
            color = Color.Red
        )
    )
}

使用 RichText 显示富文本

除了普通文本之外,你还可以使用 RichText 来显示富文本,这允许你在文本中使用不同的样式、字体和链接等。以下是一个示例:

import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.annotatedString
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.sp

@Composable
fun RichTextExample() {
    BasicText(
        text = annotatedString {
            withStyle(style = SpanStyle(color = Color.Blue, fontSize = 20.sp)) {
                append("This is blue text ")
            }
            withStyle(style = SpanStyle(color = Color.Red, fontSize = 24.sp)) {
                append("This is red text ")
            }
            withStyle(style = SpanStyle(textDecoration = TextDecoration.Underline)) {
                append("This is underlined text")
            }
        }
    )
}

解释

  1. 显示文本:

    • 使用 Text 组件显示文本内容,通过 text 参数传入文本字符串。
  2. 设置文本样式:

    • 使用 TextStyle 对象设置文本的样式,包括字体大小、颜色、字体样式等。
    • 将样式对象传递给 Text 组件的 style 参数。
  3. 使用 RichText 显示富文本:

    • 使用 BasicText 组件显示富文本内容,通过 annotatedString 函数构建富文本内容,然后使用 withStyle 函数为不同部分应用不同的样式。

通过以上示例和解释,你可以在 Jetpack Compose 中显示文本,并灵活地设置文本的样式,以满足你的需求。