文本字段的结构
@composablefuntextfield(/输入的文本内容value: String， //更新文本引起回调，类似于EditText的addtextchangedlisteneronvaluechange 3360 (string )//样式modifier: Modifier=Modifier readOnly: Boolean=false，用于控制TextField的启用状态，false :文本字段不可编辑不可聚焦enabled : boolean=true textfield的可编辑状态， //字符样式，类型为text style text style 3360 text style=local text style.current，//=null， //占位符，与放置在TextView中的hint属性一样，如何与label一起使用将复盖效果，并且仅在获得焦点时才显示placeholder: @Composable ()- Unit=null，//开头图标，文本前面的图标leadingIcon: @Composable ()- Unit )？=null，//末尾图标，文本后面的图标trailing icon : @ composable (-unit )？=null，//当前值是否错误isError: Boolean=false， //视觉转换，keyboard optoptype (如EditText的inputType )实现VisualTransformation接口以实现其他转换VisualTransformation，如return/search 键盘返回键回调keyboardactions 3360 keyboardactions=keyboardactions ()，//单行singleLine: Boolean=false，//最大行数mard 例如，按下时有什么效果，通常时有什么效果，聚焦时有什么效果等。 就像在以前重新定位的文件中写Selector一样。 确定//interaction source.collectispressedasstate (是否处于按下状态)//interaction source.collectisfocusedasstate获得焦点， interaction source.collectisdraggedasstate (是interaction source : mutableinteractionsource=remember { mutableinteracttttttte 文本框形状shape : shape=material theme.shapes.small.copy (bottom end=zerocornersize，bottomStart=ZeroCornerSize ) 光标等颜色colors : textfield colors=textfield defaults.textfield colors () )的OutlinedTextField和textfield属性大致相同
@ composablefunoutlinedtextfield (value : textfieldvalue，onvaluechange: ) textfield value )- Unit，modifier 3360 modifid readOnly: Boolean=false，text style : text style=local text style.current，label3360@=null，placeholder 3360 @ cold=null，leadingIcon: @Composable () (- Unit )？=null，trailing icon : @ composable (-unit )？=null，isError: Boolean=false，visualTra
nsformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions(), singleLine: Boolean = false, maxLines: Int = Int.MAX_VALUE, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, shape: Shape = MaterialTheme.shapes.small, colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors())接下来看看基本使用：
TextField(value = "Ellen Li", onValueChange = {}, label = { Text(text = "userName") })效果如图：
出现问题：文本框内容并没有被改变，此时焦点是可以获取到的，但是修改的文本并没有显示在文本框中，换句话说就是TextField不可用，这就和EditText不同，TextField要求我们自己处理内容更新问题，所以我们处理一下：（注意定义的text变量是可观察变量）
var text by remember { mutableStateOf("")//可观察的文本 } TextField( value = text,//显示文本 onValueChange = { text = it },//文本修改 label = { Text(text = "userName") }, leadingIcon = { Icon(Icons.Filled.Search, contentDescription = null) },//文本前图片 trailingIcon = { Image( painter = painterResource(id = R.mipmap.ico_clean), contentDescription = null, modifier = Modifier.clickable { text = "" })//按钮点击事件 },//文本后图片 )效果如图：
OutlinedTextField基本使用：
var inputText by remember { mutableStateOf("")//可观察的文本 } OutlinedTextField( value = inputText, onValueChange = { inputText = it }, label = { Text(text = "这里是标签") }, placeholder = { Text(text = "请输入内容") }, trailingIcon = { Image( painter = painterResource(id = R.mipmap.ico_clean), contentDescription = null, modifier = Modifier.clickable { inputText = "" })//按钮点击事件 } )效果如图：
接下来介绍一下视图变化：visualTransformation
var inputT by remember { mutableStateOf("")//输入文本 } var isVisible by remember { mutableStateOf(false)//是否密码显示 } //定义可见变换 val myVisibleTransform = if (isVisible) VisualTransformation.None else PasswordVisualTransformation() TextField( value = inputT, colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent), onValueChange = { value -> inputT = value }, visualTransformation = myVisibleTransform, trailingIcon = { //根据表示不同,显示不同的图标 if (isVisible) { IconButton(onClick = { isVisible = !isVisible }) { Icon(painter = painterResource(id = R.mipmap.icon_visible), null) } } else { IconButton(onClick = { isVisible = !isVisible }) { Icon(painter = painterResource(id = R.mipmap.icon_invisible), null) } } } )效果如图：
TextField的简单介绍基就到这里了，最后附上所有内容代码：
@Composablefun TestTextFiled() { Column( Modifier .fillMaxWidth() .padding(20.dp) .verticalScroll(state = rememberScrollState()) ) { TextField(value = "Ellen Li", onValueChange = {}, label = { Text(text = "userName") }) var text by remember { mutableStateOf("")//可观察的文本 } TextField( value = text,//显示文本 onValueChange = { text = it },//文本修改 label = { Text(text = "userName") }, leadingIcon = { Icon(Icons.Filled.Search, contentDescription = null) },//文本前图片 trailingIcon = { Image( painter = painterResource(id = R.mipmap.ico_clean), contentDescription = null, modifier = Modifier.clickable { text = "" })//按钮点击事件 },//文本后图片 ) Spacer(modifier = Modifier.padding(5.dp)) var inputText by remember { mutableStateOf("")//可观察的文本 } OutlinedTextField( value = inputText, onValueChange = { inputText = it }, label = { Text(text = "这里是标签") }, placeholder = { Text(text = "请输入内容") }, trailingIcon = { Image( painter = painterResource(id = R.mipmap.ico_clean), contentDescription = null, modifier = Modifier.clickable { inputText = "" })//按钮点击事件 } ) Spacer(modifier = Modifier.padding(5.dp)) var inputT by remember { mutableStateOf("")//输入文本 } var isVisible by remember { mutableStateOf(false)//是否密码显示 } //定义可见变换 val myVisibleTransform = if (isVisible) VisualTransformation.None else PasswordVisualTransformation() TextField( value = inputT, colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent), onValueChange = { value -> inputT = value }, visualTransformation = myVisibleTransform, trailingIcon = { //根据表示不同,显示不同的图标 if (isVisible) { IconButton(onClick = { isVisible = !isVisible }) { Icon(painter = painterResource(id = R.mipmap.icon_visible), null) } } else { IconButton(onClick = { isVisible = !isVisible }) { Icon(painter = painterResource(id = R.mipmap.icon_invisible), null) } } } ) }}