Compose | UI组件(三) | TextField() 输入框组件

文章目录

TextField() 简介
- TextField() 输入框例子
- TextField() 输入框添加装饰
- OutlinedTextField 边框样式输入框
- BasicTextField 输入框组件
总结

TextField() 简介

在 Compose 中，TextField() 组件表示文本输入框

@ExperimentalMaterial3Api
@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,   //在输入框结尾显示的后置图标supportingText: @Composable (() -> Unit)? = null,isError: Boolean = false,                         //当值是否有错误的时候，底部指示器和尾部图标以错误颜色显示visualTransformation: VisualTransformation = VisualTransformation.None, //输入框内的文本视觉keyboardOptions: KeyboardOptions = KeyboardOptions.Default,   //软件键盘选项keyboardActions: KeyboardActions = KeyboardActions.Default,   //当输入发出一个IME动作时，相应的回调被调用singleLine: Boolean = false,                                  //输入框是否只能输入一行maxLines: Int = Int.MAX_VALUE,                                //输入框所能输入的最大行数interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },                                                                //用于监控组件状态shape: Shape = TextFieldDefaults.filledShape,                 //输入框外观形状colors: TextFieldColors = TextFieldDefaults.textFieldColors() //输入框颜色组
)

TextField() 输入框例子

//用户名
var username by remember{ mutableStateOf("") }TextField(value = username,onValueChange = {username = it},label = { Text(text = "用户名")},leadingIcon ={Icon(imageVector        = Icons.Filled.AccountBox,contentDescription = stringResource(id = R.string.app_user_name))},modifier = Modifier.fillMaxWidth()
)/*string文件*/
<string name="app_user_name">用户名</string>

注：
var username by remember{ mutableStateOf(“”) }

by 关键字表示 属性代理，可直接获取 mutableStateOf(“”) 的 String类型 的 username属性

remember 表示可以缓存创建状态，避免重组造成的数据丢失

Icon 代表图标组件

TextField() 输入框添加装饰

Column {//用户名var username by remember{ mutableStateOf("") }//密码var password by remember{ mutableStateOf("") }//输入框TextField(value = username,onValueChange = {username = it},label = { Text(text = "用户名")},leadingIcon ={Icon(imageVector        = Icons.Filled.AccountBox,contentDescription = stringResource(id = R.string.app_user_name))},modifier = Modifier.fillMaxWidth())TextField(value = password,onValueChange = {password = it},label = { Text(text = "密码")},trailingIcon = {IconButton(onClick = { }) {Icon(painter = painterResource(id = R.mipmap.iconeye),contentDescription = stringResource(id = R.string.app_user_password))}},modifier = Modifier.fillMaxWidth())
}

注:
Column 表示 垂直布局

leadingIcon 添加前置小图标

trailingIcon 添加后置小图标，在后置小图标上添加了 IconButton ，用于响应用户点击

OutlinedTextField 边框样式输入框

带有边框的输入框，其他用法和TextField基本一样

var textName by remember { mutableStateOf("") }OutlinedTextField(value = textName,onValueChange = {textName = it},label = { Text(text = stringResource(id = R.string.app_user_name))},modifier = Modifier.fillMaxWidth()
)/*string文件*/
<string name="app_user_name">用户名</string>

BasicTextField 输入框组件

BasicTextField 是更低级的Compose组件，与 TextField、OutlinedTextField 不同之处就是拥有更多自定义效果。

TextField、OutlinedTextField不可以直接修改高度，如果修改高度，输入框会被截断，BasicTextField 就可以定制这样的需求

var textSearchName by remember { mutableStateOf("") }Box(modifier = Modifier.fillMaxWidth().background(Color(0xFFD3D3D3)),contentAlignment = Alignment.Center){BasicTextField(value = textSearchName,onValueChange = {textSearchName = it},decorationBox = { innerTextField ->Row(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.padding(horizontal = 10.dp)) {Icon(imageVector = Icons.Filled.Search,contentDescription = null)Box(modifier = Modifier.padding(horizontal = 10.dp),contentAlignment = Alignment.CenterStart) {if (textSearchName.isEmpty()) {Text(text = "请输入查找的内容",style = TextStyle(color = Color(0,0,0,128)),modifier = Modifier.fillMaxWidth())}innerTextField()}if(textSearchName.isNotEmpty()){IconButton(onClick = { textSearchName = "" },modifier = Modifier.size(16.dp)) {Icon(imageVector =Icons.Filled.Close,contentDescription = null)}}}},modifier = Modifier.padding(horizontal = 10.dp).background(Color.White, CircleShape).height(40.dp).fillMaxWidth())
}