当前位置：首页 > news >正文

Compose笔记(二十)--TextField

news 来源：原创 2025/5/1 5:46:56

这一节主要了解一下Compose的TextField,TextField 是一个用于接收用户文本输入的 UI 组件,允许用户通过键盘输入、编辑或删除文本。简单用法总结如下:

API
value：当前输入的文本内容。
onValueChange
含义：当用户输入文本时触发的回调函数，参数为新输入的文本。
作用：更新 value 的值，从而实现输入框内容的实时更新。
label：输入框顶部的提示文本（聚焦时上浮）。
placeholder：输入框为空时的占位提示。
leadingIcon 和 trailingIcon：
含义：分别是输入框左侧和右侧的图标。
作用：用于提供额外的视觉信息或交互功能。
keyboardOptions：
含义：用于配置键盘的选项，如键盘类型、输入法操作等。
作用：根据输入内容的类型定制键盘。
keyboardActions：
含义：处理键盘操作的回调，如按下回车键时的操作。
作用：实现键盘操作的自定义逻辑。
maxLines：限制输入框的最大行数（1 表示单行，Int.MAX_VALUE 表示多行）。
isError：
含义：一个布尔值，用于标记输入框的内容是否存在错误。
作用：当存在错误时，输入框会显示错误样式。
visualTransformation：
含义：对输入的文本进行视觉转换，例如密码输入时将文本显示为圆点。
作用：改变输入文本的显示形式。
OutlinedTextField：
含义：带有轮廓边框的输入框，是 TextField 的一种变体。
作用：提供更清晰的视觉边界，适用于需要突出显示输入框的场景。
BasicTextField：
含义：一个基础的输入框组件，没有默认的样式和交互效果。
作用：用于需要自定义样式和交互的场景。

栗子：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@Composable
fun TestTextField() {var text by remember { mutableStateOf("") }Column(modifier = Modifier.padding(16.dp)) {TextField(value = text,onValueChange = { text = it },label = { Text("用户名") },placeholder = { Text("请输入用户名") },singleLine = true)}
}

多行文本输入

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@Composable
fun TestMultiLineTextField() {var text by remember { mutableStateOf("") }var isError by remember { mutableStateOf(false) }Column(modifier = Modifier.padding(16.dp)) {TextField(value = text,onValueChange = {text = itisError = text.length < 10},label = { Text("备注") },placeholder = { Text("请输入至少10个字符的备注") },singleLine = false,maxLines = 3,isError = isError)if (isError) {Text(text = "备注内容至少需要10个字符",color = androidx.compose.ui.graphics.Color.Red,modifier = Modifier.padding(start = 16.dp))}}
}

带图标和键盘操作的文本输入

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusManager
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.unit.dp
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.runtime.remember
import androidx.compose.ui.text.input.KeyboardType@Composable
fun TestTextFieldThree() {var text by remember { mutableStateOf("") }val focusManager: FocusManager = LocalFocusManager.currentColumn(modifier = Modifier.padding(16.dp)) {TextField(value = text,onValueChange = { text = it },label = { Text("邮箱") },placeholder = { Text("请输入邮箱地址") },leadingIcon = { Icon(Icons.Filled.Email, contentDescription = null) },keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email,imeAction = ImeAction.Done),keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }))}
}

与下拉菜单联动的 TextField

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@Composable
fun TextFieldWithDropdown() {val options = listOf("苹果", "香蕉", "橙子", "葡萄")var expanded by remember { mutableStateOf(false) }var selectedText by remember { mutableStateOf("") }Column(modifier = Modifier.padding(16.dp)) {TextField(value = selectedText,onValueChange = {selectedText = itexpanded = true},label = { Text("选择水果") },modifier = Modifier.padding(bottom = 8.dp))DropdownMenu(expanded = expanded,onDismissRequest = { expanded = false },modifier = Modifier.padding(top = 40.dp)) {options.forEach { option ->DropdownMenuItem(onClick = {selectedText = optionexpanded = false}) {Text(text = option)}}}}
}

注意:
1 避免不必要的重绘：TextField 内容变化时会触发重绘，因此要避免在 onValueChange 中执行耗时操作，以免影响性能。
2 布局约束：使用 Modifier 对 TextField 进行布局时，要注意布局约束。例如，fillMaxWidth() 会让输入框填满可用宽度，可能会影响其他组件的布局。