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

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())
}	

注:
Box 相当传统view里面的 FrameLayout

Row 表示水平方向的 LinearLayout

总结

1. TextField() 代表默认输入框
2. OutlinedTextField 代表有表框的输入框
3. BasicTextField 代表底层输入框，区别于 TextField()、OutlinedTextField 可以自定义输入框