Jetpack Compose UI组件 —— TextField

文章目录

  • 前言
  • 一、TextField是什么?
  • 二、常用API
  • 总结


前言

如今Jetpack成为Android的主流,为了不被淘汰,我也要开始Jetpack的学习了,先从最常用的Compose开始。在这里用文章写一个总结,以后忘了还能扒出来再看一看


一、TextField是什么?

TextField是Compose中代替EditText的组件,在Compose中绝大多数是使用Material Design的,所以不熟悉的同学可以先去看看这一块

二、常用API

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun Greeting() {
    Row(horizontalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxWidth(1.0f)){
        var text = remember { mutableStateOf("") } //mutable对象代表赋予该ui动态更新,此mutable变化则ui也会随之刷新
        var isError1 = remember { mutableStateOf(false) } //使搜索框的错误状态改变
        TextField(
            value = text.value, //显示的值
            onValueChange = {text.value = it}, //当数值改变时
            placeholder = { Text("搜索") }, //hint属性,输入框内容为空时显示的提示符
            modifier = Modifier.fillMaxWidth(0.8f), //宽度为父组件的百分之八十
            isError = isError1.value,
            leadingIcon = { //前导图片
                Icon(painter = painterResource(com.jz.jetpack2.R.drawable.img_search),contentDescription = null)
            },
            trailingIcon = { //后导图片
                IconButton(
                    onClick = { //点击清空搜索框
                        text.value = "" //当属性改变时被赋予该属性的UI将会更新
                        isError1.value = false
                    },
                    content = { //图标按钮的内容 可以继续叠加
                        Row (verticalAlignment = Alignment.CenterVertically){
                            Icon(Icons.Rounded.Close,null)
                            Text("点击我")
                        }

                    }
                )
            },
            shape = RoundedCornerShape(15.dp), //搜索框圆角度

            colors = TextFieldDefaults.textFieldColors(//可在此处更改搜索框的所有属性颜色,字体,边框,下划线等
                backgroundColor = Color.White, //背景色
                textColor = Color.Black, //字体颜色
                placeholderColor = Color.Green, //提示颜色
                trailingIconColor = Color.Red, //后导背景色
            ),
            keyboardActions = KeyboardActions(
                onDone = {//在用户点击完成操作时
                    LocalSoftwareKeyboardController.current?.hide() //隐藏软键盘
                }
            )
        )
    }
}

总结

此文章单纯用来记录学习情况和做的一些总结

你可能感兴趣的:(ui,android,kotlin)