Android Compose 文本输入框TextField使用详解

已于 2024-06-17 17:56:20 修改
阅读量1.6k 收藏 10
点赞数 6
文章标签： android Compose TextField
于 2024-06-17 17:44:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Billy_Zuo/article/details/139749012
版权

一、 TextField介绍

TextField 允许用户输入和修改文本，也就是文本输入框。

TextField 分为三种：

  • TextField是默认样式
  • OutlinedTextField 是轮廓样式版本
  • BasicTextField 允许用户通过硬件或软件键盘修改文本，但不提供提示或占位符等装饰，一般用于自定义输入框

二、TextField基本使用

1、添加TextField文本输入框

@Composable
fun TextFieldView(){
    TextField(value = "Hello Compose", onValueChange ={})
}

在这里插入图片描述
此时是不能输入和删除文本的，需要动态修改TextField的value才能输入和删除文本。

2、动态修改TextField的value

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = inputPhone,
        onValueChange = {
            inputPhone = it
        })
}

在这里插入图片描述
现在可以修改和删除文本框的内容了

3、修改文字的大小和颜色

通过TextField的textStyle属性可以修改文字的大小和颜色

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = inputPhone,
        onValueChange = {
            inputPhone = it
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
    )
}

在这里插入图片描述

4、修改输入框的背景颜色

通过TextField的colors属性可以修改输入框的背景颜色

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = inputPhone,
        onValueChange = {
            inputPhone = it
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
        colors = TextFieldDefaults.colors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            focusedContainerColor = Color.Green,
            disabledContainerColor = Color.Green,
            unfocusedContainerColor = Color.Green,
        ),
    )
}

在这里插入图片描述

5、添加hint提示文字

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("") }

    TextField(
        value = inputPhone,
        onValueChange = {
            inputPhone = it
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
        colors = TextFieldDefaults.colors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            focusedContainerColor = Color.Green,
            disabledContainerColor = Color.Green,
            unfocusedContainerColor = Color.Green,
        ),
        placeholder = {
            Text(
                text = "请输入手机号",
                color = Color.Red,
            )
        }
    )
}

在这里插入图片描述

6、设置文本单行显示

通过设置singleLine属性，可以设置文本只显示一行

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("") }

    TextField(
        value = inputPhone,
        onValueChange = {
            inputPhone = it
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
        colors = TextFieldDefaults.colors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            focusedContainerColor = Color.Green,
            disabledContainerColor = Color.Green,
            unfocusedContainerColor = Color.Green,
        ),
        singleLine = true,
        placeholder = {
            Text(
                text = "请输入手机号",
                color = Color.Red,
            )
        }
    )
}

在这里插入图片描述

7、软键盘显示手机号输入

修改keyboardOptions属性

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("") }

    TextField(
        value = inputPhone,
        onValueChange = {
            inputPhone = it
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
        colors = TextFieldDefaults.colors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            focusedContainerColor = Color.Green,
            disabledContainerColor = Color.Green,
            unfocusedContainerColor = Color.Green,
        ),
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Phone
        ),
        placeholder = {
            Text(
                text = "请输入手机号",
                color = Color.Red,
            )
        }
    )
}

在这里插入图片描述

8、限制输入手机号

TextField没有直接限制输入的属性，通过onValueChange来限制输入的内容和位数，以下以现在输入11位的手机号为例：

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("") }

    TextField(
        value = inputPhone,
        onValueChange = {
            val numberRegex = "^[0-9]\\d*$".toRegex()
            if ((it.isEmpty() || it.matches(numberRegex)) && it.length <= 11) {
                inputPhone = it
            }
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
        colors = TextFieldDefaults.colors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            focusedContainerColor = Color.Green,
            disabledContainerColor = Color.Green,
            unfocusedContainerColor = Color.Green,
        ),
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Phone
        ),
        placeholder = {
            Text(
                text = "请输入手机号",
                color = Color.Red,
            )
        }
    )
}

在这里插入图片描述

9、添加输入框后的图标

通过trailingIcon属性添加输入框后的图标，点击可以清空输入框内容

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("") }

    TextField(
        value = inputPhone,
        onValueChange = {
            val numberRegex = "^[0-9]\\d*$".toRegex()
            if ((it.isEmpty() || it.matches(numberRegex)) && it.length <= 11) {
                inputPhone = it
            }
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
        colors = TextFieldDefaults.colors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            focusedContainerColor = Color.Green,
            disabledContainerColor = Color.Green,
            unfocusedContainerColor = Color.Green,
        ),
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Phone
        ),
        trailingIcon = {
            if (inputPhone.isNotEmpty()) {
                Image(painterResource(id = R.drawable.ic_input_clear),
                    contentDescription = "输入框后面的图标",
                    Modifier
                        .size(14.dp)
                        .clickable {
                            inputPhone = ""
                        })
            }
        },
        placeholder = {
            Text(
                text = "请输入手机号",
                color = Color.Red,
            )
        }
    )
}

在这里插入图片描述

10、隐藏输入内容

通过visualTransformation属性，可以隐藏输入内容

@Composable
fun TextFieldView() {
    var inputPhone by remember { mutableStateOf("") }

    TextField(
        value = inputPhone,
        onValueChange = {
            val numberRegex = "^[0-9]\\d*$".toRegex()
            if ((it.isEmpty() || it.matches(numberRegex)) && it.length <= 11) {
                inputPhone = it
            }
        },
        textStyle = TextStyle(
            fontSize = 16.sp, color = Color.Blue
        ),
        colors = TextFieldDefaults.colors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            focusedContainerColor = Color.Green,
            disabledContainerColor = Color.Green,
            unfocusedContainerColor = Color.Green,
        ),
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Phone
        ),
        visualTransformation = PasswordVisualTransformation(),
        trailingIcon = {
            if (inputPhone.isNotEmpty()) {
                Image(painterResource(id = R.drawable.ic_input_clear),
                    contentDescription = "输入框后面的图标",
                    Modifier
                        .size(14.dp)
                        .clickable {
                            inputPhone = ""
                        })
            }
        },
        placeholder = {
            Text(
                text = "请输入手机号",
                color = Color.Red,
            )
        }
    )
}

在这里插入图片描述

三、TextField完整属性

@OptIn(ExperimentalMaterial3Api::class)
@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,   //当输入发出一个IME动作时，相应的回调被调用
    singleLine: Boolean = false,                                  //输入框是否只能输入一行
    maxLines: Int = Int.MAX_VALUE,                                //输入框所能输入的最大行数
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },                                                                //用于监控组件状态
    shape: Shape = TextFieldDefaults.filledShape,                 //输入框外观形状
    colors: TextFieldColors = TextFieldDefaults.textFieldColors() //输入框颜色组
)
Billy_Zuo
关注
Android开发之Compose基础学习-TextFiled文本输入框基本用法
xiayiye5的博客
08-20 1278
【代码】Android开发之Compose基础学习-TextFiled文本输入框基本用法。
Compose_05--文本输入框TextField
weixin_42404361的博客
11-22 2739
一、在Compose中，要实现文本输入就要使用TextField，而TextField 实现分为两个级别： TextField 是 Material Design 实现，一般建议用这个实现，默认样式为填充，如果你想要轮廓样式的话，可以用OutlinedTextField。 BasicTextField 允许用户通过硬件或软件键盘编辑文字，但没有提供提示或占位符等装饰。 二、下面我们来看看 TextField 、OutlinedTextField和OutlinedTextField的使用 TextFie
Compose TextField详解
最新发布
旭
08-21 709
TextFieldState是CoreTextField完成构建各类组件的对象以及声明剩余输入框样式及内容的状态state之后开始构建支持TextField样式渲染的各种Modifier。以此可以理解，Compose布局的过程是先测量到布局到渲染，所以构建各类对象再构建各种Modifier的顺序理应如此。针对所谓的文本内容超过TextField的显示区域，会出现Scroller滚动条来动态查看所输入的内容；相较于Text，TextField需要提供可输入的能力以及渲染效果动态更新的能力。
Android Compose TextField （文本框）基本操作
qq_28673213的博客
06-19 1489
compose TextFiled
Android Compose 五：常用组件 TextField
weixin_41648633的博客
05-15 1456
去除底部横线TextField(placeholder = {Text(text = "这是一个placeholder")},
Android TextFields
宇文
12-04 1270
Android TextFields
Android的开始之TextField控件
weixin_30666753的博客
02-24 244
android:inputType: "text"Normal text keyboard."textEmailAddress"Normal text keyboard with the @ character."textUri"Normal text keyboard with the / character."number"Basic number keypad."phone"Ph...
JetPack Compose之TextField使用指南
左大侠的博客
02-05 2230
让你彻底明白Jetpack中的textField使用
Compose之TextField
腾飞吧！
08-08 677
要查看所有属性和更详细的信息，可以参考官方文档：https://developer.android.com/reference/kotlin/androidx/compose/material3/TextField。然后，我们使用remember来创建一个可变状态，以跟踪输入框中的文本值。接下来，我们使用TextField组件创建了一个文本输入框，设置了初始值、输入变化监听器、标签、占位符等属性。在Jetpack Compose中，TextField是一个常用的组件，用于创建文本输入框。
Android Compose TextField输入框控件
qq_41899289的博客
09-13 1467
@Composable fun TextFieldDemo(){ Column(Modifier.statusBarsPadding()) { var text by remember { mutableStateOf("") } //rememberSaveable与remember相似，但存储的值将使用保存的实例状态机制在活动或进程重新创建后继续存在（例如，在 Android 应用程序中旋转屏幕时会发生这种情况）。 var isError by .
Jetpack Compose的常见材料对话框-Android开发
05-26
Jetpack Compose的常用材质对话框Compose材质对话框当前撰写版本：dev14积分该库的设计在很大程度上受到https://github.com/afollestad/material-dialogs的启发核心核心文档依赖项{...实现“ com.vanpra.compose -material-dialogs：core：0.1.0“ ...} DateTime Picker DateTime Picker文档依赖性{...实现” com.vanpra.compose-material-dialogs：datetime：0.1.0“ ...}要做添加缺少对话框，例如颜色
自定义输入textfield
07-23
自定义输入textfield，这个源码是在源码天堂那个转载过来的，具体大家可以到那里看看一下吧，希望大家能够喜欢。 演示图：http://code.662p.com/view/10936.html
Android Compose TextField实现密码可见效果切换
qq_28673213的博客
06-19 797
Compose 密码显示效果
Compose输入框
juer2017的博客
10-07 449
Compose输入框
compose中的TextField
zhangshiwen的博客
07-29 2296
TextField位于androidx.compose.ui:ui-text包下，属于Text体系里面的。该函数类似EditText，样式就是MD风格 基础API @Composable fun TextField( // 输入框内容 value: String, // 内容更改回调 比较简单就是类似EditText中addTextChangedListener函数监听值变化 onValueChange: (String) -> Unit, // 基础样式
android - Text Fields
ShareUs的专栏
12-07 850
》In addition to typing, text fields allow for a variety of other activities, such as text selection (cut, copy, paste) and data look-up via auto-completion.     android:id="@+id/email_address"    
Jetpack Compose - TextField
乐翁龙
12-05 6235
Jetpack Compose - TextField1、属性一览2、使用示例3、未解决问题 1、属性一览 关于输入框，官方提供了两种类型，TextField和OutlinedTextFiedl。 先看下两种输入框最简单的效果，上面是普通的TextField效果，跟之前的EditText默认效果一致，第二种是OutlinedTextField效果，带有一个边框： 首先看下TextField的两个函数，链接在这里： @Composable fun TextField( value: String,
Android Text fieids
帅次的博客
12-05 1044
一、Text fieids一、Text fieids允许用户在 UI 中输入文本，。在 Text fieids 没出来(我不知道)前，想实现这个功能就需要自己自定义控件来实现这个功能。几年前做个上面这种样式(filled 填充型)。需要多个控件组合 + 动画才能实现，而且需要处理的逻辑也很多。了解到 Text fieids 那么你仅需即可实现之前的 UI 效果，是不是美滋滋？一起来研究一下，现在用不上指不定啥时候就用上了。
android compose中 在TextField中实现在文本后面追加文本，并且光标会跟随文本
04-30
您好！谢谢您的问题。要实现在TextField中在文本后面追加文本，您可以使用TextEditingController来控制TextField的文本内容。您可以在TextField中设置一个TextEditingController，并在您想要追加文本的地方调用controller.text += "您要追加的文本"。这样就可以实现在TextField中追加文本的功能，并且光标会跟随文本！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值