Compose Text和TextField简单使用

引言

Compose 中的 Text 和 TextField 控件是用于处理和显示文本的关键元素。Text 控件负责显示不可编辑的文本，而 TextField 控件则允许用户输入和编辑文本。本文将深入探讨这两个控件的简单使用，展示如何轻松地在 Compose 应用程序中处理文本。

Text 控件

简单使用

创建 Text 控件最简单的方法是使用其构造函数，并传递要显示的文本作为参数：

Text(text = "Hello, Compose!")

这将在屏幕上显示文本 "Hello, Compose!"。

修改文字样式

Text 控件提供了一系列属性，可用于修改文本的样式。以下是一些最常用的属性：

• fontFamily ：设置文本的字体。
• fontSize ：设置文本的大小，单位为 sp。
• color ：设置文本的颜色。
• fontWeight ：设置文本的粗细。
• textAlign ：设置文本的对齐方式。

例如，要将文本设置为粗体蓝色 Helvetica 字体，可以这样写：

Text(
    text = "Hello, Compose!",
    fontFamily = FontFamily.SansSerif,
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

TextField 控件

简单使用

TextField 控件通过其构造函数创建，并传递一个可变状态对象作为参数。此状态对象将存储文本字段中的文本值。

val textState = remember { mutableStateOf("Initial value") }
TextField(value = textState.value, onValueChange = { textState.value = it })

这将创建一个文本字段，其初始值为 "Initial value"。当用户在文本字段中输入文本时，onValueChange 回调将被触发，并用新值更新 textState.value。

验证和错误处理

TextField 控件还可以用于验证用户输入。通过设置 isError 属性为 true，可以显示一个错误指示器。errorMessage 属性可用于指定要显示的错误消息。

TextField(
    value = textState.value,
    onValueChange = {
        if (it.isBlank()) {
            isError = true
            errorMessage = "Please enter a valid value"
        } else {
            isError = false
            errorMessage = null
        }
        textState.value = it
    }
)

结论

Compose 中的 Text 和 TextField 控件提供了强大的 API，用于处理和显示文本。通过理解这些控件的简单使用，开发人员可以轻松地在 Compose 应用程序中创建交互式且可访问的文本体验。