【原创】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
该属性类似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一样，这里不再赘述
