Jetpack Compose（三）--基础控件：输入框

该章内容主要介绍如何使用，不涉及原理

Demo代码传送门

官方介绍

  • 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的属性使用

去掉下划线

//关键代码，其他代码就不展示了
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。

更多示例效果：

更多示例效果

Demo代码传送门

备注：若有错误的地方，望指出。共同学习进步

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容