Android Jetpack Compose中Text的使用

• Text的介绍（翻译）
• • 基本使用
  • 使用字符串资源
  • Text设置样式
  • • 设置颜色
    • 设置字号
    • 设置斜体
    • 设置粗体
    • 设置文字内容居中
    • 设置字体
    • 设置组合样式
    • 设置最大行数
    • 设置最大长度后，尾部的处理（溢出）
    • 设置文字可选区域（不可选区域）
  • 可输入的Text(EditText)
  • • TextField
    • OutlinedTextField
    • BasicTextField
  • 官方文档
  • 缺陷
  • 补充

Text的介绍（翻译）

文本是任何UI的核心部分，Jetpack Compose使显示或编写文本变得更容易。Compose利用其构建块的组合，这意味着您不需要覆盖属性和方法，也不需要扩展大型类，就可以按照您想要的方式使用特定的可组合设计和逻辑。

作为基础，Compose提供了BasicText和BasicTextField，它们是显示文本和处理用户输入的基本框架。在更高的层次上，Compose提供了Text和TextField，它们是遵循材料设计准则的可组合的。建议使用它们，因为它们在Android上对用户具有正确的外观和感觉，并包括其他选项，以简化其定制，而无需编写大量代码。

基本使用

@Preview
@Composable
fun SimpleText() {
  Text("Hello World")
}
           

使用字符串资源

这也是官方推荐的使用方式，而不是硬编码。

@Preview
    @Composable
    fun StringResourceText() {
        Text(stringResource(R.string.hello_world))
    }
           

Text设置样式

设置颜色

@Preview
    @Composable
    fun BlueText() {
        Text("Hello World", color = Color.Blue)
    }
           

设置字号

@Preview
    @Composable
    fun BigText() {
        Text("Hello World", fontSize = 30.sp)
    }
           

设置斜体

@Preview
    @Composable
    fun ItalicText() {
        Text("Hello World", fontStyle = FontStyle.Italic)
    }
           

设置粗体

@Preview
    @Composable
    fun BoldText() {
        Text("Hello World", fontWeight = FontWeight.Bold)
    }
           

设置文字内容居中

@Preview(showBackground = true)
    @Composable
    fun CenterText() {
        Text("Hello World", textAlign = TextAlign.Center,
            modifier = Modifier.width(150.dp))
    }
           

设置字体

@Preview
    @Composable
    fun DifferentFonts() {
        Column {
            Text("Hello World", fontFamily = FontFamily.Serif)
            Text("Hello World", fontFamily = FontFamily.SansSerif)
        }
    }
           

当然你依然可以使用自己的字体文件，他依旧放在老地方

然后你需要定义一个字体簇，这是Compose推荐的用法，因为这样可以包含不同的字重

val firaSansFamily = FontFamily(
        Font(R.font.firasans_light, FontWeight.Light),
        Font(R.font.firasans_regular, FontWeight.Normal),
        Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
        Font(R.font.firasans_medium, FontWeight.Medium),
        Font(R.font.firasans_bold, FontWeight.Bold)
)
           

然后就可以在Text中使用了

Column {
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal,
                    fontStyle = FontStyle.Italic)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}
           

设置组合样式

Text的组合样式的写法也很Compose ，就像下面的代码一样，这将生成一个段落

@Composable
fun ParagraphStyle() {
    Text(buildAnnotatedString {
        withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("Hello\n")
            }
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold,
                                        color = Color.Red)) {
                append("World\n")
            }
            append("Compose")
        }
    })
}
           

设置最大行数

@Composable
fun LongText() {
    Text("hello ".repeat(50), maxLines = 2)
}
           

设置最大长度后，尾部的处理（溢出）

@Composable
fun OverflowedText() {
    Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}
           

设置文字可选区域（不可选区域）

在Compose中，Text默认是不可以进行选取的，我们需要在外层使用SelectionContainer进行包裹，顺带，可以在内层使用DisableSelection 包裹不可以选中的区域。还是很有意思的。因为这之中隔着一层Column 方法，不得不说Compose设计的很巧妙。

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}
           

可输入的Text(EditText)

TextField

TextField 实际上是MD风格的EditText就是我们之前用过（基本不用）的TextInputEditText

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    />

</com.google.android.material.textfield.TextInputLayout>
           

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
           

OutlinedTextField

还有一个MD风格的是OutlinedTextField

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
           

BasicTextField

实际上我们最想要的是毫无特色的输入框=>BasicTextField

@Preview(showBackground = true)
@Composable
fun SimpleBasicTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }
    BasicTextField(
        value = text,
        onValueChange = { text = it }
    )
}
           

还有一些api的组合使用在这里暂不赘述

官方文档

当然啦，当你看完这的时候可以去官方文档再看看，或许有新的补充和收获。

Text的官方文档

缺陷

目前为止Text是不支持富文本的使用的，因为他只能使用AnnotatedString（String在它的内部会进行包装，最后还是AnnotatedString）作为文本内容的，而传统的富文本是转化为Spanned来进行使用的。 这里我不得不使用AndroidView导入TextView进行兼容使用。如果有知道Compose渲染富文本的可以告诉笔者。

AndroidView({ TextView(it) }, modifier = Modifier.padding(15.dp)) {
        it.setTextColor(
            ContextCompat.getColor(
                it.context,
                R.color.color_FFFFFF
            )
        )
        it.text = "Your RichText"
    }
           

补充

var text by remember { mutableStateOf("Hello") }
           

如果这句在使用是报错:

Type ‘TypeVariable(T)‘ has no method ‘getValue(Nothing?, KProperty＜＞)‘ and thus it cannot serve…

导包加入：import androidx.compose.runtime.