【原创】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一样,这里不再赘述

posted @ 2021-07-11 11:56  拜雨  阅读(701)  评论(3编辑  收藏  举报