该章内容主要介绍如何使用，不涉及原理
官方介绍
- TextField是Material Design实现，默认样式为填充。基于BasicTextField扩展的。设置最小高度
- OutlinedTextField是Material Design实现的轮毂样式版本。
- BasicTextField，原生输入框，允许自定义高度，没有提供提示或占位符等装饰。
TextField
基于BasicTextField扩展的。设置最小高度，使用时需要注意下该情况
@ExperimentalMaterial3Api
@Composable
fun TextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
label: @Composable (() -> Unit)? = null,
placeholder: @Composable (() -> Unit)? = null,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
supportingText: @Composable (() -> Unit)? = null,
isError: Boolean = false,
visualTransformation: VisualTransformation = VisualTransformation.None,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions.Default,
singleLine: Boolean = false,
maxLines: Int = Int.MAX_VALUE,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = TextFieldDefaults.filledShape,
colors: TextFieldColors = TextFieldDefaults.textFieldColors()
) { ... ... }
参数含义：
- value: 显示的文本
- onValueChange: 更新后的回调
- modifier:修饰器
- enabled:是否可用，如果为false，将不可选中，不可输入，呈现出禁用状态
- readOnly:是否只读，如果是true，则不可编辑，但是可以选中，可以触发复制
- textStyle: 文字样式，前文中Text的诸多参数亦用于构建TextStyle
- label: 显示在文本字段内的可选标签，未获得焦点时呈现
- placeholder: 获得焦点时的默认呈现 类似Tint的效果
- leadingIcon: 输入框前部的图标；
- trailingIcon: 输入框后部的图标；
- isError: 输入内容是否错误，如果为true，则label，Icon等会相应的展示错误的显示状态；
- visualTransformation: 内容显示转变，例如输入密码时可以变成特定效果
- keyboardOptions: 软件键盘选项
- keyboardActions: 设置软键盘右下角按钮的点击事件，与keyboardOption中的imeAction配合使用
- singleLine: 是否单行输入
- maxLines:最大行数，需要≥1。如果将singleLine设置为true，则将忽略此参数，
- interactionSource: 表示一个由组件发出的交互流
- shape: 输入框的形状
- colors: 各种状态下的颜色 类似Android的ColorStateList，下面有TextFieldDefaults.textFieldColors简单介绍
TextFieldDefaults.textFieldColors简单介绍
fun textFieldColors(
textColor: Color // 文本颜色
disabledTextColor: Color // 禁用状态时候文本颜色
backgroundColor: Color // 背景色
cursorColor: Color // 光标颜色
errorCursorColor: Color // isError = true时候光标颜色
---------这面这组是TextField底部下划线的颜色，当都设置为透明时候我们就可以实现去掉下划线的效果了，对于自定义TextField样式很有效果哦----
focusedIndicatorColor: Color
unfocusedIndicatorColor: Color
disabledIndicatorColor: Color
errorIndicatorColor: Color
---------End
---------下面这些根据字面意思就知道了，不备注了
leadingIconColor: Color
disabledLeadingIconColor: Color
errorLeadingIconColor: Color
trailingIconColor: Color
disabledTrailingIconColor: Color
errorTrailingIconColor: Color
focusedLabelColor: Color
unfocusedLabelColor: Color
disabledLabelColor: Color
errorLabelColor: Color
placeholderColor: Color
disabledPlaceholderColor: Color
)
label、placeholder、colors的属性使用
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LabelTextField() {
val editText = remember {
mutableStateOf("")
}
TextField(
value = editText.value,
onValueChange = { editText.value = it },
label = @Composable { Text(text = "label、placeholder、colors") },
placeholder = @Composable { Text(text = "演示label、placeholder、colors") },
singleLine = true,
modifier = Modifier
.fillMaxWidth(1f)
.wrapContentHeight()，
colors = TextFieldDefaults.textFieldColors(
textColor = Color.Black, //文本的颜色
focusedLabelColor = Color.Red,
placeholderColor = Color.Gray
)
)
}
![]()
label、placeholder、colors的属性使用
label、placeholder、colors的属性使用
去掉下划线
//关键代码，其他代码就不展示了
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
errorIndicatorColor = Color.Transparent
)
去掉下划线
当然也可直接用OutlinedTextField，下面会有介绍
圆角背景
//关键代码，其他代码就不展示了
//圆角背景，也可设置每个角的弧度RoundedCornerShape(topStart: Float, topEnd: Float,bottomEnd: Float,bottomStart: Float)
shape = RoundedCornerShape(12.dp), //圆角背景
![]()
圆角背景
圆角背景
设置键盘类型,定义软键盘右下角按钮显示类型以及点击事件
//关键代码，其他代码就不展示了
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Go
),
keyboardActions = KeyboardActions(
onGo = {
Toast.makeText(
context,
"onSend",
Toast.LENGTH_SHORT
).show()
})
设置键盘类型
ImeAction类型None、 Default、Go、Search、Send、Previous、、Next、Done就不一一解释了
扩展--输入过滤
限制输入长度
//关键代码，其他代码就不展示了
onValueChange = {
if (it.length <= 10) {
editText.value = it
} else {
editText.value = it.substring(0,10)
}
},
可以通过onValueChange 函数实现，还可以利用正则表达是实现类似传统EditText的inputType功能
只能输入字母
//关键代码，其他代码就不展示了
val editText = remember {
mutableStateOf(TextFieldValue(""))
}
val regex = Regex("^[a-zA-Z]+$")
TextField(
value = editText.value,
onValueChange = {
if(it.text.contains(regex) || it.text.isEmpty()) editText.value = it
}, ... ...)
上述例子用到TextFieldValue，目的为了解决把光标定位到非最后的位置时，输入禁止输入的字符是，光标后移的问题
密码输入框
val pwdOff = remember {//保存密码可见性状态变化
mutableStateOf(false)
}
TextField(
... ...
trailingIcon = {
IconToggleButton(
checked = pwdOff.value,
onCheckedChange = {
pwdOff.value = it
},
) {
Icon(
imageVector = if (pwdOff.value) {
ImageVector.vectorResource(id = R.drawable.ic_eye_n)
} else {
ImageVector.vectorResource(id = R.drawable.ic_eye_p)
},
contentDescription = ""
)
}
},
visualTransformation = (
if (pwdOff.value) {
VisualTransformation.None//普通文本样式
} else {
PasswordVisualTransformation('*')//密码样式，星号显示文字
})
)
密码输入框
OutlinedTextField
也是基于BasicTextField扩展的。Material Design实现的轮毂样式版本，可以定制边框颜色。他和TextField的用法类似。下面只介绍差异地方的使用
OutlinedTextField(
... ...
shape = RoundedCornerShape(12.dp), //圆角背景
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Color.Red //获取焦点时边框的颜色
)
)
带边框的输入框
BasicTextField
原生输入框，允许自定义高度，没有提供提示或占位符等装饰。可扩展性比较强，如果想实现更复杂的样式，可自定义BasicTextField。
更多示例效果：
更多示例效果
