TextFieldLocated under the androidx.compose.ui:ui-text package, it belongs to the Text system. This function is similar EditText, the style is MD style
Basic API
@Composable
fun TextField(
// 输入框内容
value: String,
// 内容更改回调 比较简单就是类似EditText中addTextChangedListener函数监听值变化
onValueChange: (String) -> Unit,
// 基础样式
modifier: Modifier = Modifier,
// 是否可编辑和聚焦 是否可用，等价于Android中的enable属性
enabled: Boolean = true,
// 是否只读，只读状态下，编辑框内容不可以编辑，但是可以获取焦点、移动光标 聚焦复制内容
readOnly: Boolean = false,
// 文字样式，类型为TextStyle，我们可以看到该函数可以配置文本的颜色，大小，权重，字体等各种属性
textStyle: TextStyle = LocalTextStyle.current,
// Material风格的Label
label: @Composable (() -> Unit)? = null,
// 文字为空时占位内容 这个就是TextView中配置的hint属性一样，需要注意的是如何和label一起使用，会被覆盖效果，只有获取焦点时候才会被显示出来
placeholder: @Composable (() -> Unit)? = null,
// 文字前的图标
leadingIcon: @Composable (() -> Unit)? = null,
// 文字后的图标
trailingIcon: @Composable (() -> Unit)? = null,
// 当前是否是错误状态
isError: Boolean = false,
// 文字效果应用，可实现输入密码等效果。 可以简单的理解为EditText中的inputType
//可视化转换，该属性类型是一个接口VisualTransformation。
//默认实现类是PasswordVisualTransformation，主要是将输入的内容转换为*****代替，与inputType属性设置为password效果一样.
//我们也可以自己实现VisualTransformation该接口来实现一些其他转换，比如限制长度、部分输入文本的特殊处理、输入文本类型校验等等
visualTransformation: VisualTransformation = VisualTransformation.None,
// 可以用于配置输入框类型。可以定义为return/search等
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
// 可以用于配置输入框Enter键盘类型。 按下软键盘上返回键的回调
keyboardActions: KeyboardActions = KeyboardActions(),
// 是否单行
singleLine: Boolean = false,
// 最大行
maxLines: Int = Int.MAX_VALUE,
// 监听组件交互变化
//interactionSource 处理状态的属性，比如按下的时候什么效果，正常时候什么效果，获取焦点时候什么效果等。类似之前再布局文件里写Selector。
//interactionSource.collectIsPressedAsState() 判断是否按下状态
//interactionSource.collectIsFocusedAsState() 判断是否获取焦点的状态
//interactionSource.collectIsDraggedAsState() 判断是否拖动
interactionSource: MutableInteractionSource = remember {
MutableInteractionSource() },
// 定义此文本框的形状(不包含背景)
shape: Shape =
MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
// 输入框颜色 用来定义文字，光标等的处于不同状态的颜色
colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)
basic usage
@Composable
fun TextFieldDemo(context: Context) {
// 定义一个可观测的text，用来在TextField中展示
var text by remember {
mutableStateOf("")
}
TextField(
value = text, // 显示文本
onValueChange = {
text = it }, // 文字改变时，就赋值给text
label = {
Text(text = "Input") }, // label是Input
// 头部图标，设置为搜索
leadingIcon = @Composable {
Image(
imageVector = Icons.Filled.Search, // 搜索图标
contentDescription = null,
modifier = Modifier.clickable {
Toast.makeText(context, "search $text", Toast.LENGTH_SHORT).show() }) // 给图标添加点击事件，点击就吐司提示内容
},
// 尾部图标，设置为清除
trailingIcon = @Composable {
Image(imageVector = Icons.Filled.Clear, // 清除图标
contentDescription = null,
modifier = Modifier.clickable {
text = "" }) // 给图标添加点击事件，点击就清空text
},
placeholder = @Composable {
Text(text = "This is placeholder") }, // 不输入内容时的占位符
)
}
Outlined text box OutlinedTextField
The API is the same as TextField, but the style is different
Basic text box BasicTextField
BasicTextField can be used to respond to hardware or software disk editing text, and can customize cursor, border, etc., but there is no placeholder and label attributes. The APIs are as follows:
fun BasicTextField(
// 文字，也可以传入TextFieldValue
value: String,
// 文字改变的回调
onValueChange: (String) -> Unit,
// 修饰符
modifier: Modifier = Modifier,
// 是否可用
enabled: Boolean = true,
// 是否只读
readOnly: Boolean = false,
// 文字样式
textStyle: TextStyle = TextStyle.Default,
// 定义软键盘上的返回键的功能，可以定义为return/search等
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
// 按下软键盘上返回键的回调
keyboardActions: KeyboardActions = KeyboardActions.Default,
// 是否是单行
singleLine: Boolean = false,
// 最大行数
maxLines: Int = Int.MAX_VALUE,
// 可以简单的理解为EditText中的inputType
visualTransformation: VisualTransformation = VisualTransformation.None,
// 布局变化的回调
onTextLayout: (TextLayoutResult) -> Unit = {
},
// 监听组件交互变化
interactionSource: MutableInteractionSource = remember {
MutableInteractionSource() },
// 光标颜色设置
cursorBrush: Brush = SolidColor(Color.Black),
// 用来定义装饰框，innerTextField这个参数就是用来绘制文字的
decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
@Composable {
innerTextField -> innerTextField() }
)
basic usage
@Composable
fun BasicTextFieldDemo2() {
var text by remember {
mutableStateOf("hello") }
BasicTextField(
value = text,
onValueChange = {
text = it },
modifier = Modifier
.background(Color.Gray, RoundedCornerShape(8.dp))
.padding(5.dp), // 灰色背景
cursorBrush = SolidColor(Color.Red),
decorationBox = @Composable {
innerTextField ->
Canvas(modifier = Modifier.size(width = 100.dp, height = 50.dp)) {
drawRect(color = Color.Red, style = Stroke(width = 1F))
}
innerTextField()
}
)
}