Compose输入框

news2024/10/7 14:22:08

TextField

label设置提示内容,TextFieldDefaults.textFieldColors设置输入框背景颜色

TextField(
    modifier = Modifier
        .fillMaxWidth()
        .padding(5.dp),
    value = text.value,
    onValueChange = { text.value = it },
    label = { Text(text = "请输入内容") },
    colors = TextFieldDefaults.textFieldColors(
        //容器颜色
        containerColor = colorResource(id = R.color.white),
    )
)

OutlinedTextField

OutlinedTextField(
    modifier = Modifier
        .fillMaxWidth()
        .padding(5.dp),
    value = text.value,
    onValueChange = { text.value = it },
    label = { Text("请输入内容") },
    colors = TextFieldDefaults.textFieldColors(
        //容器颜色
        containerColor = colorResource(id = R.color.white),
    )
)

自定义TextField

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldTest() {
    val text = remember { mutableStateOf("你好") }
    val context = LocalContext.current
    TextField(
        value = text.value,
        onValueChange = { text.value = it },
        label = { Text("请输入内容") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp),
        colors = TextFieldDefaults.textFieldColors(
            //容器颜色
            containerColor = colorResource(id = R.color.white),
        ),
        //键盘设置
        keyboardOptions = KeyboardOptions(
            //设置全部字符大写
            capitalization = KeyboardCapitalization.Characters,
            //输入类型设置为Email
            keyboardType = KeyboardType.Email,
            //开启自动更正
            autoCorrect = true,
            //IME动作设置为搜索
            imeAction = ImeAction.Search
        ),
        keyboardActions = KeyboardActions(onSearch = {
            Toast.makeText(context, "Compose,${text.value}", Toast.LENGTH_SHORT).show()
        })
    )
}

完整代码:

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.cwj.composedemo.ui.theme.ComposeDemoTheme

/**
 * EditText案例
 */
class EditTextActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Home()
                }
            }
        }
    }
}

@Composable
fun Home() {
    Column(
        modifier = Modifier.fillMaxSize(),
    ) {
        TextField()

        OutlinedTextField()

        TextFieldTest()
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextField() {
    val text = remember { mutableStateOf("你好") }
    TextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp),
        value = text.value,
        onValueChange = { text.value = it },
        label = { Text(text = "请输入内容") },
        colors = TextFieldDefaults.textFieldColors(
            //容器颜色
            containerColor = colorResource(id = R.color.white),
        )
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun OutlinedTextField() {
    val text = remember { mutableStateOf("你好") }
    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp),
        value = text.value,
        onValueChange = { text.value = it },
        label = { Text("请输入内容") },
        colors = TextFieldDefaults.textFieldColors(
            //容器颜色
            containerColor = colorResource(id = R.color.white),
        )
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldTest() {
    val text = remember { mutableStateOf("你好") }
    val context = LocalContext.current
    TextField(
        value = text.value,
        onValueChange = { text.value = it },
        label = { Text("请输入内容") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp),
        colors = TextFieldDefaults.textFieldColors(
            //容器颜色
            containerColor = colorResource(id = R.color.white),
        ),
        //键盘设置
        keyboardOptions = KeyboardOptions(
            //设置全部字符大写
            capitalization = KeyboardCapitalization.Characters,
            //输入类型设置为Email
            keyboardType = KeyboardType.Email,
            //开启自动更正
            autoCorrect = true,
            //IME动作设置为搜索
            imeAction = ImeAction.Search
        ),
        keyboardActions = KeyboardActions(onSearch = {
            Toast.makeText(context, "Compose,${text.value}", Toast.LENGTH_SHORT).show()
        })
    )
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
       Home()
    }
}

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

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

相关文章

算法题:买卖股票的最佳时机 II

这道题是贪心算法的中级难度练习题,由于题目设定,整个价格都是透明的,这里并不涉及需要预测股票涨势的问题。解决思路不难,就是一旦股票价格开始下降了就买入,一旦上升了,就赶紧卖出。(完整题目…

led护眼台灯对眼睛有伤害吗?推荐好用的led护眼台灯

其实led护眼台灯对眼睛伤害是不大的,而且和白炽灯、卤素灯等老式台灯相对比,反而更加护眼。因为白炽灯、卤素灯等光线都不太稳定,而且光线不是很均匀可以明显感觉有明暗差,最主要的是频闪现象会比较严重,长时间使用的话…

Apache Tomcat安装、运行

介绍 Apache Tomcat是下面多个规范的一个开源实现:Jakarta Servlet、Jakarta Server Pages、Jakarta Expression Language、Jakarta WebSocket、Jakarta Annotations 和 Jakarta Authentication。这些规范是 Jakarta EE 平台的一部分。 Jakarta EE 平台是Java EE平…

Vue Router的使用

使用 项目中注入路由器 在项目中 src 目录下新建 router 目录,其中包含 index.js 路由主文件。 // src/router/index.jsimport Vue from vue import Router from vue-router import { routes } from ./routes.jsVue.use(Router) const router new Router({route…

EPDB 08、EPDBS 10、PDRV、EPDZA06插装式比例减压阀放大器

比例方向阀W42E-5PS03、W43E-5PS05、W42E-1AS06、W43E-1AS06、插装式S22E-1V08放大器。 该放大器既可用于工业及移动设备应用,也可用于固定安装。因此,电压范围非常宽,在8至35VDC之间变化。这些放大器对欠压和电压尖峰非常不敏感&#xff0c…

浅谈时间流管理体系

不想聊技术,但又想分享一些东西,这篇文章分享下如何构造自己的时间流管理体系以及如何完整的把控一个事件安排统筹,这里对一个大型事件或大型知识体系如何分解为不同问题的小点不做点出,这里只提时间管理体系化。 好处的话也不做阐…

Nginx+Keepalived实现服务高可用

Nginx 和 Keepalived 是常用于构建高可用性(High Availability)架构的工具。Nginx 是一款高性能的Web服务器和反向代理服务器,而Keepalived则提供了对Nginx服务的健康状态监测和故障切换功能。 下载Nginx 在服务器1和服务器2分别下载nginx …

深入理解 python 虚拟机:原来虚拟机是这么实现闭包的

深入理解 python 虚拟机:原来虚拟机是这么实现闭包的 在本篇文章当中主要从虚拟机层面讨论函数闭包是如何实现的,当能够从设计者的层面去理解闭包就再也不用死记硬背一些闭包的概念了,因为如果你理解闭包的设计原理之后,这些都是…

嵌入式学习笔记(48)什么是I2C通信

10.1.1物理接口:SCL SDA (1)SCL:时钟线,传输CLK,一般是I2C主设备向从设备提供时钟的通道。 (2)SDA:数据线,通信数据都通过SDA线传输。 10.1.2通信特征:串行、同步、非差分、低速 (1)I2C属于…

Python中的多态

迷途小书童 读完需要 3分钟 速读仅需 1 分钟 当我们谈到多态时,可以将其比喻为一个人具有多种身份的能力。在不同的情境下,这个人可以表现出不同的行为和特征。在 Python 中,多态是面向对象编程中的一个重要概念,它允许我们使用相…

PHP 伪协议:使用 php://filter 为数据流应用过滤器

文章目录 参考环境PHP 伪协议概念为什么需要 PHP 伪协议? php://filter概念格式 基本使用普通读写file_get_contents 与 file_put_contentsinclude 过滤器的基本使用base64 的编码与解码rot13 加解密rot13 算法string.rot13 过滤器列表多个过滤器的使用注意事项 处理…

【软件测试】功能测试/接口测试/自动化测试/性能测试/验收测试

软件测试的主要流程 一、测试主要的四个阶段 1.测试计划设计阶段:产品立项之后,进行需求分析,需求评审,业务需求评级,绘制业务流程图。确定测试负责人,开始制定测试计划; 2.测试准备阶段&…

【每日一题】股票价格跨度

文章目录 Tag题目来源题目解读解题思路方法一:暴力枚举方法二:单调栈 写在最后 Tag 【单调栈】【设计类】【数组】【2023-10-07】 题目来源 901. 股票价格跨度 题目解读 找出小于等于今天股票价格的最大连续天数(从今天往回数,…

AI颠覆法律行业,律师要失业了?

如果要说一个 AI 真正起飞,并且对行业从业者带来的更多是正面影响的垂直行业,小编觉得在目前阶段,法律可以算一个。这个行业有几个特点:对人的依赖很大,专业性很强,大量繁复的文字工作。因此,在…

水土保持方案编制丨点型项目、市政工程、线型工程、矿山工程、水利工程、取土场/弃渣场、补报项目、水土保持监测验收等

目录 专题一 点型水土保持方案编制方法及案例分析 专题二 市政工程水土保持方案编制方法及案例分析 专题三 线型工程水土保持方案编制方法及案例分析 专题四 矿山工程水土保持方案编制方法及案例分析 专题五 水利工程水土保持方案编制方法及案例分析 专题六 取土场、弃渣…

电影产业的数据洞察:爬虫技术在票房分析中的应用

概述 电影产业是一个庞大而复杂的行业,涉及到各种各样的因素,如导演、演员、类型、主题、预算、宣传、口碑、评分、奖项等。这些因素都会影响电影的票房收入,也会反映出电影市场的动态和趋势。为了更好地了解电影产业的数据洞察,…

Python机器学习实战-特征重要性分析方法(6):XGBoost(附源码和实现效果)

实现功能 计算一个特性用于跨所有树拆分数据的次数。更多的分裂意味着更重要。 实现代码 import xgboost as xgb import pandas as pd from sklearn.datasets import load_breast_cancer import matplotlib.pyplot as pltX, y load_breast_cancer(return_X_yTrue) df pd.D…

CMMI5认证哪些企业可以申请

CMMI5认证哪些企业可以申请 什么是CMMI5认证 CMMI(Capability Maturity Model Integration)是一种用于评估组织的软件工程能力的国际标准。CMMI模型包括5个等级,其中CMMI5是最高等级,代表组织具有达到持续优化和创新的能力。获得…

源码编译dotnetcore的runtime

为了dotnetcore运行时的安可目标,特意在国庆假期研究了怎么编译dotnetcore的runtime。由于我们用的是.net6,最新的是8,所以从github下载的.net6的分支代码进行的编译。查遍了国内外资料,估计微软服务太体贴了,竟然没什…