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

news2024/10/23 5:01:11

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【机器学习】机器学习重要方法—— 半监督学习：理论、算法与实践

【机器学习】机器学习重要方法—— 半监督学习：理论、算法与实践

文章目录 引言第一章 半监督学习的基本概念1.1 什么是半监督学习1.2 半监督学习的优势 第二章 半监督学习的核心算法2.1 自训练&#xff08;Self-Training&#xff09;2.2 协同训练&#xff08;Co-Training&#xff09;2.3 图半监督学习&#xff08;Graph-Based Semi-Supervise…
阅读更多...
C++基础知识——命名空间

C++基础知识——命名空间

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan. 文章目录 1、什么是命名空间2、命名空间的作用3、如何定义命名…
阅读更多...
总结之LangChain（一）—— 简单使用LangChain

总结之LangChain（一）—— 简单使用LangChain

LangChain介绍 LangChain官网&#xff1a;https://python.langchain.com/v0.2/docs/introduction/ LangChain 是一个基于大型语言模型&#xff08;LLM&#xff09;开发应用程序的框架。 LangChain 简化了LLM应用程序生命周期的每个阶段&#xff1a; 开发&#xff1a;使用 L…
阅读更多...
JavaSE 利用正则表达式进行本地和网络爬取数据(爬虫)

JavaSE 利用正则表达式进行本地和网络爬取数据(爬虫)

爬虫 正则表达式的作用 作用1&#xff1a;校验字符串是满足规则 作用2&#xff1a;在一段文本中查找满足需要的内容 本地爬虫和网络爬虫 Pattern类 表示正则表达式 Matter类 文本编译器&#xff0c;作用按照正则表达式的规则去读取字符串&#xff0c;从头开始读取&#xf…
阅读更多...
Everything 一款功能强大的搜索工具

Everything 一款功能强大的搜索工具

要在电脑上使用Everything搜索文件&#xff0c;您需要使用以下步骤&#xff1a; 在您的电脑上下载并安装Everything软件。您可以从官方网站https://www.voidtools.com/downloads/下载最新版本的软件。 安装完成后&#xff0c;打开Everything软件。 在搜索栏中输入您要查找的文…
阅读更多...
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 连续字母长度(100分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 连续字母长度(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…
阅读更多...
手把手教你如何部署自己的One Tool助手

手把手教你如何部署自己的One Tool助手

手把手教你如何部署自己的One Tool助手 前言安装教程效果图在这里插入图片描述 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0fc5cb0f451e4c50b55ec850a5517b0c.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/56331f878b9545d5bff6f938c4b317…
阅读更多...
uniapp 项目，用HBuilder X在小程序端 运行项目，发布项目

uniapp 项目，用HBuilder X在小程序端 运行项目，发布项目

1. 运行项目&#xff08;直接在微信开发者工具中导入项目&#xff0c;运行项目会报错&#xff0c;要通过HBuilder X运行项目&#xff09; 1.1 配置内容&#xff0c;必须是该小程序的开发者才能运行 查看appid, 项目 -- manifest.json 文件 -- 微信小程序配置 -- APPID 小程序…
阅读更多...
用国内首家文生软件平台生成一个整蛊拼图小游戏是什么体验？

用国内首家文生软件平台生成一个整蛊拼图小游戏是什么体验？

前言&#xff1a; 众所周知&#xff0c;2023年是中国大模型发展的元年&#xff0c;以ChatGPT3.5为代表的初代语言大模型横空出世&#xff0c;直接掀起了一阵全球范围内的AIGC浪潮。 在中国大模型追星赶月的这一年&#xff0c;技术迭代日新月异&#xff0c;行业趋势不断变化&a…
阅读更多...
RabbitMQ 学习笔记

RabbitMQ 学习笔记

RabbitMQ学习笔记 一些概念 Broker &#xff1a;RabbitMQ服务。 virtual host&#xff1a; 其实就是分组。 Connection&#xff1a;连接&#xff0c;生产者消费者与Broker之间的TCP连接。 Channel&#xff1a;网络信道&#xff0c;轻量级的Connection&#xff0c;使用Chann…
阅读更多...
基于SpringBoot+Vue北部湾地区助农平台设计和实现(源码+LW+调试文档+讲解等)

基于SpringBoot+Vue北部湾地区助农平台设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…
阅读更多...
Centos SFTP搭建

Centos SFTP搭建

SFTP配置、连接及挂载教程_sftp连接-CSDN博客1、确认是否安装yum list installed | grep openssh-server 2、创建用户和组 sudo groupadd tksftpgroup sudo useradd -g tksftpgroup -d /home/www/tk_data -s /sbin/nologin tksftp01 sudo passwd tksftp013. 配置SFTP注意&a…
阅读更多...
【ElasticSearch】ElasticSearch基本概念

【ElasticSearch】ElasticSearch基本概念

ES 是一个开源的高扩展的分布式全文检索引擎&#xff0c;它是对开源库 Luence 的封装&#xff0c;提供 REST API 接口 MySQL 更适合数据的存储和关系管理&#xff0c;即 CRUD&#xff1b;而 ES 更适合做海量数据的检索和分析&#xff0c;它可以秒级地从数据库中检索出我们感兴…
阅读更多...
数据结构和算法之复杂度比较

数据结构和算法之复杂度比较

数据结构和算法之复杂度比较 参考如下网址&#xff1a;https://www.bigocheatsheet.com/ 方便快速查询 1. 复杂度比较 2. 常见数据结构复杂度 3. 常见算法复杂度
阅读更多...
计网课设-发送TCP数据包

计网课设-发送TCP数据包

一、效果展示 二、代码实现 import nmap import socket import tkinter as tk from tkinter import messagebox,Listbox from threading import Thread#获取自身IP&#xff0c;从而确定当前局域网范围 def get_ip_address():#创建了一个socket对象&#xff0c;socket.AF_INET表…
阅读更多...
计算机网络：应用层 - 文件传输协议 FTP 电子邮件

计算机网络：应用层 - 文件传输协议 FTP 电子邮件

计算机网络&#xff1a;应用层 - 文件传输协议 FTP & 电子邮件 文件传输协议 FTP电子邮件 文件传输协议 FTP 文件传送协议 FTP(File Transfer Protocol)&#xff0c;曾是互联网祝频讲解上使用得最广泛的文件传送协议。 其特点是&#xff1a;若要存取一个文件&#xff0c;…
阅读更多...
【ARMv8/v9 GIC 系列 3 -- GIC 的 类型寄存器 GICD_TYPER】

【ARMv8/v9 GIC 系列 3 -- GIC 的 类型寄存器 GICD_TYPER】

文章目录 GIC 类型寄存器 GICD_TYPERESPI_Range, 位[31:27]RSS, 位[26]No1N, 位[25]A3V, 位[24]IDBits, 位[23:19]DVIS, 位[18]LPIs, 位[17]MBIS, 位[16]NUM_LPIs, 位[15:11]SecurityExtn, 位[10]NMI, 位[9]ESPI, 位[8]CPUNumber, 位[7:5]ITLinesNumber, 位[4:0]GIC 类型寄存器…
阅读更多...
嵌入式实验---实验四 DMA传输实验

嵌入式实验---实验四 DMA传输实验

一、实验目的 1、掌握STM32F103DMA传输程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、利用外部按键KEY1来控制DMA的传送&#xff0c;每按一次KEY1&#xff0c;DMA就传送一次数据到USART1&#xff08;串口1&#xff09;&#xff1b; 2、该串口…
阅读更多...
SAP BC OBB8 自解释字段50个字符加到100个字符的长度

SAP BC OBB8 自解释字段50个字符加到100个字符的长度

开整 SE11 复制TEXT1_052 -> ZTEXT1_052 并把域 改成TEXT100 se11 修改T052 激活 报错了&#xff0c;是个视图的问题 参考 SAP COEP V_COEP列不一致的问题及处理_sap coep表报错-CSDN博客 更新一下 再激活成功了 但是OBB8 保存的还是50个字符长度 &#xff0c;中…
阅读更多...
Ollma本地大模型沉浸式翻译【403报错解决】

Ollma本地大模型沉浸式翻译【403报错解决】

最终效果 通过Chrome的 沉浸式翻译 插件&#xff0c;用OpenAI通用接口调用本地的Ollma上的模型&#xff0c;实现本地的大模型翻译文献。 官方文档指导的Ollama的配置&#xff1a;一定要配置环境变量&#xff0c;否则会出现【403报错】
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023