TextField 是一个用于接收用户输入的UI组件。它是Jetpack Compose中的一部分,可以方便地实现用户文本输入的功能。
TextField 允许用户输入一个或多个文本行,可以用于接收用户的文本输入、搜索等操作。它提供了一些常用的功能,如输入验证、键盘类型设置、输入提示等。
TextField的函数声明如下所示。
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextField(value: String,onValueChange: (String) -> 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,prefix: @Composable (() -> Unit)? = null,suffix: @Composable (() -> Unit)? = null,supportingText: @Composable (() -> Unit)? = null,isError: Boolean = false,visualTransformation: VisualTransformation = VisualTransformation.None,keyboardOptions: KeyboardOptions = KeyboardOptions.Default,keyboardActions: KeyboardActions = KeyboardActions.Default,singleLine: Boolean = false,maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,minLines: Int = 1,interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },shape: Shape = TextFieldDefaults.shape,colors: TextFieldColors = TextFieldDefaults.colors()
)
下面通过示例说明该函数的使用方法
一、简单输入框
一个简单的输入框实现如下。
由于TextField时一个函数,无法通过输入获取输入框的内容,这里需要声明一个状态变量text,该变量用于保存输入框的内容,也是输入框要显示的内容。
在TextField方法中,value是输入框要显示的内容;onValueChange是内容变换后的回调,这里只是把变化后的内容保存到text变量中;label是标签,用于提示该输入框的作用。
当输入完成后,变量text保存的正是输入框的内容,从该变量取值即可。
二、带边框的输入框
使用OutlinedTextField可实现带边框的输入框,示例如下。
OutlinedTextField与TextField的用法基本一致,label的显示样式不一样,OutlinedTextField的label显示在边框上。
三、输入框的样式
通过textStyle可以改变输入框的样式,示例如下
textStyle可以修改输入框文字的颜色、粗细等。
也可以实现渐变色的输入框,示例如下。
通过Brush可以定义渐变色,然后赋值给TextStyle的参数brush即可实现渐变色的输入框。
四、键盘选项
1)自动调整大小写布局
当某个输入框拉起输入法,通过keyboardOptions可以输入法的键盘属性,示例如下。
KeyboardOptions的capitalization用于指定键盘的大小写布局,当值为Words时,表示当输入每个单词的第一个字母时,键盘都变成大写布局。当值为Characters时,表示每个字母都大小,当值为Sentences时,表示句子的第一个字母才大小。
2)自定义Enter键
KeyboardOptions的imeAction可以自定义Enter键图标,如下所示。
这里定义为Search,输入法显示的是一个查询的图标。
3)自定义输入法的类型
KeyboardOptions的keyboardType可以定义输入法类型。
这里把Number数值给keyboardType,表示只输入数字,因此输入法只显示数据按键。
在该示例中还有其它参数,这里简单介绍一些。
placeholder:占位符,当输入框没有内容会显示占位符。
leadingIcon: 头部图标。
trailingIcon:尾部图标。
keyboardActions:当用户按Enter后收到回调onDone