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

一、 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() //输入框颜色组
)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/717857.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

车企高管组团“出道”，汽车营销已经Next level了？

车企高管组团“出道”，汽车营销已经Next level了？

汽车进入了“卷”老板、“卷”高管的时代&#xff01; 谁能想到&#xff0c;雷军凭一己之力&#xff0c;在一定程度上重塑了汽车的竞争策略。价格战之外&#xff0c;车市又开启了流量之战。 云略曾在《雷军20天吸粉500w&#xff01;……》一文中&#xff0c;提到继雷军之后&…
阅读更多...
【问题记录】Ubuntu提示: “E: 软件包 gcc 没有可安装候选“

【问题记录】Ubuntu提示: “E: 软件包 gcc 没有可安装候选“

Ubuntu提示: "E: 软件包 gcc 没有可安装候选" 一&#xff0c;问题现象二&#xff0c;问题原因&解决方法 一&#xff0c;问题现象 在虚拟机Ubuntu中进行安装gcc命令时报错&#xff1a;“E: 软件包 gcc 没有可安装候选”: 二&#xff0c;问题原因&解决方法 …
阅读更多...
树莓派 Thonny使用

树莓派 Thonny使用

在python中新建了虚拟环境&#xff0c;需要Thonny使用虚拟环境&#xff0c;在python executable中选中虚拟环境路径下的python3即可
阅读更多...
银河麒麟4.0.2安装带有opengl的Qt5.12.9

银河麒麟4.0.2安装带有opengl的Qt5.12.9

银河麒麟4.0.2下载地址&#xff1a;银河麒麟-银河麒麟(云桌面系统)-银河麒麟最新版下载v4.0.2-92下载站 VirtualBox:https://www.virtualbox.org/wiki/Downloads qt下载&#xff1a;Index of /archive/qt/5.12/5.12.9 1安装VirtualBox:网上教材比较多 1&#xff09;安装完后安…
阅读更多...
苹果的后来者居上策略：靠隐私保护打脸微软

苹果的后来者居上策略：靠隐私保护打脸微软

01.苹果与微软相比更注重用户隐私 我一直是Windows的忠实用户&#xff0c;但微软疯狂地将人工智能融入一切&#xff0c;让我开始觉得应该咬咬牙换成Mac。 自小我几乎只用Windows电脑&#xff0c;所以我对MacOS一直不太适应。虽然Windows 11有其缺点&#xff0c;但总的来说&am…
阅读更多...
车载ADAS面试题，零基础也能看得懂！

车载ADAS面试题，零基础也能看得懂！

周一来刷刷ADAS相关的面试题吧&#xff01;相信看完这些题目&#xff0c;你会对ADAS有个更清晰的认识&#xff0c;即使你是零基础也可以轻松明白&#xff01; 1、描述 ADAS 系统的基本组成和功能 答案&#xff1a;高级驾驶辅助系统&#xff08;ADAS&#xff09;是一套融合了多种…
阅读更多...
如何通过Appium连接真机调试

如何通过Appium连接真机调试

1、打开appium&#xff0c;点击启动appium服务器&#xff08;如图1&#xff09; 2、appium启动成功后&#xff0c;点击放大镜启动检查会话&#xff08;如图2&#xff09; 3、填写真机设备信息和APP的package、activity,点击启动会话&#xff08;如图3&#xff09; 4、打开运行A…
阅读更多...
过拟合与正则化

过拟合与正则化

Location Beijing 过拟合 对于一个模型 A A A&#xff0c;解向量空间为 θ \theta θ&#xff0c;误差函数用式1表示 J ( θ ) J a c c [ y θ ( x ) − y ] 2 (1) J(\theta)J_{acc}[y_\theta(x)-y]^2\tag{1} J(θ)Jacc​[yθ​(x)−y]2(1) 首先我们考虑用模型 A A A拟合下…
阅读更多...
整合第三方技术-整合JUnit

整合第三方技术-整合JUnit

黑马程序员Spring Boot2 文章目录 名称&#xff1a;SpringBootTest类型&#xff1a;测试类注解位置&#xff1a;测试类定义上方作用&#xff1a;设置JUnit加载的SpringBoot启动类范例&#xff1a;
阅读更多...
算法题解记录29+++全排列（百日筑基）

算法题解记录29+++全排列（百日筑基）

一、题目描述 题目难度&#xff1a;中等 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示…
阅读更多...
JavaScript常见面试题（二）

JavaScript常见面试题（二）

文章目录 1.new操作符的实现原理2.map和Object的区别3.JavaScript脚本延迟加载的方式有哪些&#xff1f;4.JavaScript 类数组对象的定义&#xff1f;&#xff08;伪数组&#xff09;5. 数组有哪些原生方法&#xff1f;6.为什么函数的 arguments 参数是类数组而不是数组&#xf…
阅读更多...
成都跃享未来教育咨询解锁新篇章

成都跃享未来教育咨询解锁新篇章

在快节奏的现代社会中&#xff0c;每个人都在追求着属于自己的非凡人生。而成都跃享未来教育咨询&#xff0c;正是那个能够智慧引领你走向成功、成就非凡人生的灯塔。 跃享未来教育咨询&#xff0c;位于历史悠久的文化名城成都&#xff0c;这里不仅有丰富的文化底蕴&#xff0c…
阅读更多...
【C++进阶学习】第二弹——继承（下）——挖掘继承深处的奥秘

【C++进阶学习】第二弹——继承（下）——挖掘继承深处的奥秘

继承&#xff08;上&#xff09;&#xff1a;【C进阶学习】第一弹——继承&#xff08;上&#xff09;——探索代码复用的乐趣-CSDN博客 前言&#xff1a; 在前面我们已经讲了继承的基础知识&#xff0c;让大家了解了一下继承是什么&#xff0c;但那些都不是重点&#xff0c;今…
阅读更多...
企业社会责任认证：提升品牌价值的关键

企业社会责任认证：提升品牌价值的关键

社会责任认证&#xff08;Social Responsibility Certification&#xff09;是现代企业在经营过程中主动履行社会责任、尊重人权、保护环境等方面所获得的认证。这不仅是企业管理的要求&#xff0c;更是企业赢得社会信任和支持的关键。 社会责任认证是企业在经营过程中&#xf…
阅读更多...
nvm 报错https://npm.taobao.org/mirrors/node/index.json 淘宝镜像更换

nvm 报错https://npm.taobao.org/mirrors/node/index.json 淘宝镜像更换

文章目录 一、问题背景二、解决问题1. 获取配置文件的位置2. 修改配置文件中的镜像源配置3. 修改 npm 镜像源 一、问题背景 使用nvm的时候报错: Could not retrieve https://npm.taobao.org/mirrors/node/index.json. 由于淘宝的镜像域名更换&#xff0c;npm.taobao.org 域名…
阅读更多...
基于WPF技术的换热站智能监控系统15--实时读取PLC数据

基于WPF技术的换热站智能监控系统15--实时读取PLC数据

1、创建PLC实时数据 1、添加数据块 2、创建6个变量 用来表示水泵1和水泵2的参数&#xff0c;可以根据现场实际情况添加更多的变量参数 3、设置块属性并编译 4、下载该程序到PLC中 5、添加监控表 2、读取设备数据 S7协议下的tcp直接通讯&#xff0c;配置简单&#xff0c;一般P…
阅读更多...
浏览器必装插件推荐：最新版Simple Allow Copy，解除网页复制限制！

浏览器必装插件推荐：最新版Simple Allow Copy，解除网页复制限制！

经常在网上找资料的朋友&#xff0c;尤其是学生党&#xff0c;总会遇到一个问题&#xff1a;很多资料网站的文字是禁止复制的。于是大家通常会使用各种文字识别软件来图文转换&#xff0c;或者直接手打。 今天这款小工具&#xff0c;可以轻松复制各种氪金网站上的任何文字&…
阅读更多...
李沐：用随机梯度下降来优化人生！

李沐：用随机梯度下降来优化人生！

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 今天我们来聊聊达叔 6 大核心算法之 —— 优化 算法。吴恩达&#xff1a;机器学习的六个核心算法&#xff01; 梯度下降优化算法是机器…
阅读更多...
【数据结构与算法 刷题系列】求带环链表的入环节点（图文详解）

【数据结构与算法 刷题系列】求带环链表的入环节点（图文详解）

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法 经典例题》C语言 期待您的关注 ​ 目录 一、问题描述 二、解题思路 方法一&#xff1a;数学公式推导法 方法…
阅读更多...
Kaggle比赛：成人人口收入分类

Kaggle比赛：成人人口收入分类

拿到数据首先查看数据信息和描述 import pandas as pd import seaborn as sns import matplotlib.pyplot as plt # 加载数据&#xff08;保留原路径&#xff0c;但在实际应用中建议使用相对路径或环境变量&#xff09; data pd.read_csv(r"C:\Users\11794\Desk…
阅读更多...
最新文章

Copyright @ 2022~2023