Jetpack Compose学习笔记(三)

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

已经把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

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

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 这个和TextInputLayout与EditText组合的效果是一样的，相关属性和TextField一样，这里不再赘述