短视频系统利用Compose实现全新文本输入框

短视频系统利用Compose实现全新文本输入框的相关代码
Jetpack Compose是用于构建原生Android UI的现代工具包，使用更简洁的代码、强大的工具和直观的Kotlin API，简化并加速了Android上的UI开发。不同于Andorid常见的Xml+命令式Coding的UI开发范式，Compose基于Kotlin的DSL实现了一套类似React的声明式UI框架。伴随React Native、Flutter等大前端框架的兴起以及Jetpack Compose、SwiftUI等native框架的出现，声明式UI正逐渐成为客户端UI开发的新趋势，那么下面主要就来介绍一下Compose中全新的文本框。

@Composable
fun TextField(
value: TextFieldValue,//要展示的文本
onValueChange: (TextFieldValue) -> Unit,//监听文本变化
modifier: Modifier = Modifier,//修饰符，常用于背景设置等
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,//指定输入类型，类似inputType
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()//各种cursor、文本等颜色
)

那么如何用compose实现上述满足我们日常用法的输入框呢,代码如下：

@Composable
fun ShowTextField(context: MainActivity) {
//初始化文本变量
var text by remember { mutableStateOf("") }

TextField(
value = text, // 显示文本
onValueChange = { text = it }, // 监听文本变化，并赋值给text
label = { Text(text = "Input") }, // 设置label
leadingIcon = @Composable {// 设置左边图标
Image(
imageVector = Icons.Filled.Search,
contentDescription = "search", //image的无障碍描述
modifier = Modifier.clickable {// 通过modifier来设置点击事件
Toast.makeText(
context,
"search $text",
Toast.LENGTH_SHORT
).show()
})
},
trailingIcon = @Composable {//设置右边图标
Image(imageVector = Icons.Filled.Clear,
contentDescription = "clear",
modifier = Modifier.clickable { text = "" }) // 添加点击清空事件
},
placeholder = @Composable { Text(text = "This is placeholder") },//hint提示语
}