短视频系统利用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提示语 }
以上就是 短视频系统利用Compose实现全新文本输入框的相关代码,更多内容欢迎关注之后的文章