【原创】Jetpack Compose学习笔记(三)

Jetpack Compose学习笔记(三)

最近看了不少的ComposeUI相关的博文,自己越来越喜欢这种界面编写方式了,看着代码感觉有些复杂其实是自己封装的不好,多看看大神开源的会有很大帮助。

Jetpack Compose学习笔记(二)已经把Text函数基本的使用都介绍了,复杂的实现还在于AnnotatedString的使用,大多数场景都可以满足了。本篇主要学习TextField函数的使用。

TextField

TextField位于androidx.compose.ui:ui-text包下,属于Text体系里面的。该函数类似EditText,样式就是MD风格,下面详细介绍写该函数的使用。

基本参数

value: String, onValueChange: (String) -> Unit, 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, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions(), singleLine: Boolean = false, maxLines: Int = Int.MAX_VALUE, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, shape: Shape = MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize), colors: TextFieldColors = TextFieldDefaults.textFieldColors()

还是蛮多的,一点一点来学习吧。

  • value和onValueChange

这两个属性比较简单就是类似EditText中addTextChangedListener函数监听值变化

  • enabled

是否可以编辑,如果是false,则和Text函数没啥区别了

  • readOnly

编辑框内容不可以编辑,但是可以获取焦点、移动光标

  • textStyle

文本样式,类型为TextStyle,我们可以看到该函数可以配置文本的颜色,大小,权重,字体等各种属性,相关属性可以参看Text函数

  • label

这个label属性如果不是默认的MD样式的这种编辑框,基本不会使用到,可以看下效果

  • placeholder

这个就是TextView中配置的hint属性一样, 这里需要注意的是如何和label一起使用,会被覆盖效果,只有获取焦点时候才会被显示出来

  • leadingIcon、trailingIcon

该属性类似drawableStartdrawableEnd,配置前面的图片,不过这个没办法控制图片周围的距离,要是想修改边距,那就需要自己嵌套布局来实现

ps 这里多数依据吧,对于trailingIcon属性可能很多用户会问如何实现点击操作,下面给个示例,这里涉及Modify所以先不过多说,后面单独学习

trailingIcon = { Icon( imageVector = Icons.Outlined.Close, contentDescription = null, modifier = Modifier.clickable { input = "" } ) },
  • isError

默认该属性是false,设置后底部横线,label等会显示错误时候颜色。一般校验输入内容为错误时候动态设置为true使用。

  • visualTransformation

可视化转换,该属性类型是一个接口VisualTransformation

默认实现类是PasswordVisualTransformation,主要是将输入的内容转换为*****代替,与inputType属性设置为password效果一样.

当然我们也可以自己实现VisualTransformation该接口来实现一些其他转换,比如限制长度、部分输入文本的特殊处理、输入文本类型校验等等

  • keyboardOptions & keyboardActions

keyboardOptions配置软键盘类型,例如:键盘输入类型为数字,键盘行为。该属性类型为KeyboardOptions,我们可以看下该类的构造函数

class KeyboardOptions constructor( val capitalization: KeyboardCapitalization = KeyboardCapitalization.None, val autoCorrect: Boolean = true, val keyboardType: KeyboardType = KeyboardType.Text, //可以配置输入类型Text,Number等 val imeAction: ImeAction = ImeAction.Default //配置软键盘行为,例如:搜索,完成,发送等 ) {

keyboardActions,键盘行为回调,例如用户点击搜索,完成等

  • singleLine & maxLines

配置可编辑行数,当singleLine设置为true,则maxLines默认为1。不过多介绍了

  • interactionSource

该属性是交互的状态信息,也就是相当于我们之前给按钮设置的各种selector,来实现普通、点击效果等。一般用在Button比较多。

下面示例展示使用一个获取焦点的交互状态来动态修改label属性。

val interactionSource = remember { MutableInteractionSource() } val focused by interactionSource.collectIsFocusedAsState() var mutableTip by remember { mutableStateOf("") } mutableTip = if (focused) "获取焦点" else "失去焦点" var input by remember { mutableStateOf("") } TextField( value = input, label = { Text(mutableTip) }, interactionSource = interactionSource, onValueChange = { input = it } )
  • shape

定义控件形状,默认四个角都是0.dp,我们可以根据自己需要调用fun RoundedCornerShape(size: Dp) 定义效果

  • colors

配置TextField各种颜色信息

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 )

OutlinedTextField

OutlinedTextField 这个和TextInputLayoutEditText组合的效果是一样的,相关属性和TextField一样,这里不再赘述


__EOF__

本文作者拜雨
本文链接https://www.cnblogs.com/baiyuas/p/14988888.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   拜雨  阅读(1187)  评论(3编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示