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 可以自定义输入框
  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谭祖爱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值