/ 前言 /
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中全新的文本框。
/ 基本API介绍 /
@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、文本等颜色
)
/ 基础用法 /
日常开发中,经常会使用到文本输入框;一般样式为左边是一个搜索的图标,右边是清楚文本图标,如果文本框未输入,则提示hint关键词,效果大概是以下这种:
那么如何用compose实现上述满足我们日常用法的输入框呢,代码如下:
@Composable
fun ShowTextField(context: MainActivity) {
//初始化文本变量
var text by remember { mutableStateOf("") }
TextField(
value = text, // 显示文本
onValueChange = { text = it }, // 监听文本变化,并赋值给text
label = { Text(text = "Input") }