Compose_05--⽂本输⼊框TextField
⼀、在Compose中，要实现⽂本输⼊就要使⽤TextField，⽽TextField 实现分为两个级别：
1. TextField是 Material Design 实现，⼀般建议⽤这个实现，默认样式为填充，如果你想要轮廓样式的话，可以⽤OutlinedTextField。
2. BasicTextField 允许⽤户通过硬件或软件键盘编辑⽂字，但没有提供提⽰或占位符等装饰。
⼆、下⾯我们来看看 TextField、OutlinedTextField和OutlinedTextField的使⽤
1. TextField的使⽤：
在使⽤TextField时必须给value和onValueChange赋值，要不然会报错；
要设置TextField的边距和宽⾼时可以使⽤设置modifier属性；
要设置TextField的标签时可以使⽤label属性；
要设置TextField的标签可以使⽤placeholder属性；
要设置TextField只有⼀⾏时可以设置singleLine = true；
要设置TextField的⾏数时可以设置maxLine2属性
要设置TextField的⽂字的相关属性可以在textStyle属性；
要设置TextField为密码样式时可以visualTransformation设置为PasswordVisualTransformation()；
要设置TextField的前置和后置图标可以分别使⽤leadingIcon和trailingIcon属性；
要设置TextField不可编辑的话，可以把enabled设置为false（这种⽅式选中复制操作都不可以）或readOnly设置true（这种⽅式可以选中复制操作）；
要设置TextField的背景形状可以使⽤shape属性；
要设置TextField的背景颜⾊、⽂字颜⾊、提⽰⽂字颜⾊、标签、下划线、光标颜⾊（包括聚焦、失焦和错误的颜⾊）等颜⾊可以使⽤colors属性（注意：如果在textStyle中设置了⽂字的颜⾊，则优先textStyle设置的颜⾊，同样placeholder中设置的也⼀样）；
要设置TextField的输⼊类型时可以使⽤keyboardOptions属性；
要设置TextField的下划线不可见时，根据情况把相关IndicatorColor设置为透明即可，貌似没有见到有设置它的下划线可见不可见的属性；
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activitypose.setContent
import androidxpose.foundation.Image
import androidxpose.foundation.layout.Column
import androidxpose.foundation.layout.fillMaxWidth
import androidxpose.foundation.layout.padding
import androidxpose.foundation.shape.RoundedCornerShape
import KeyboardOptions
import androidxpose.material.*
import androidxpose.runtime.*
import androidxpose.berSaveable
import androidxpose.ui.Modifier
import aphics.Color
import s.painterResource
import TextStyle
import font.FontWeight
import input.KeyboardType
import input.PasswordVisualTransformation
import androidxpose.ui.unit.dp
import androidxpose.ui.unit.sp
/**
* ⽂本输⼊
*/
class Compose_05Activity : ComponentActivity(){
override fun onCreate(savedInstanceState: Bundle?) {
setContent {
compose_05_TextField()
}
}
}
@Composable
fun compose_05_TextField(){
Column(modifier = Modifier.padding(10.dp)) {
var text by remember { mutableStateOf("") }
TextField(
value = text, // ⽂本
onValueChange = { text = it }, // ⽂本变化事件
modifier = Modifier  // 宽⾼相关属性
.fillMaxWidth()
.padding(10.dp),
textStyle = TextStyle(color = Color.Blue,  // ⽂本相关属性
fontSize = 20.sp, fontWeight = FontWeight.Bold),
shape = RoundedCornerShape(10.dp), // 背景形状
label = { Text(text = "我是标签")}, // 标签
placeholder = {Text(text = "请输⼊", fontSize = 20.sp, color = Color.Blue)},  // 提⽰输⼊内容
//            singleLine = true,  // 设置单⾏
//            maxLines = 2,  // 设置两⾏
colors = FieldColors(backgroundColor = Color.Green,  // 背景等相关颜⾊
disabledIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
fontweight属性boldfocusedIndicatorColor = Color.Transparent,
errorIndicatorColor = Color.Red,
placeholderColor = Color.Red,
textColor = Color.White,
cursorColor = Color.Red),
leadingIcon = {  // 前图标
Image(painter = painterResource(id = R.drawable.flower),
contentDescription = "")
},
trailingIcon = { // 后置图标
Image(painter = painterResource(id = R.drawable.flower),
contentDescription = "")
},
//            visualTransformation = PasswordVisualTransformation(), // 显⽰内容为密码样式
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password), // 键盘输⼊类型
//            readOnly = true,  // 不可编辑，只读，还可以选中复制
//            enabled = false  // 不可编辑，不可选中复制
)
}
}
2.  OutlinedTextField的使⽤：
OutlineTextField的使⽤基本上和TextField⼀样，需要注意的地⽅是如果colors属性下的IndicatorColor相关属性设置为透明的话，那么边框就没有了。
3. BasicTextField的使⽤：
其实，BasicTextField的使⽤和TextField类似，与TextField相⽐少了label、placeholder、colors、leadingIcon、trailingIcon属性，多了onTextLayout（布局重新计算之后的回调）、cursorBrush（设置
光标）和decorationBox（在⽂本域周围添加修饰）属性；查
看TextField源码可以发现是基于BasicTextField实现。
4. 设置不能以某个⽂字开头的实现需要在onValueChange⾥设置，例如不能以“0”开头的实现：
@Composable
fun compose_05_TextField(){
Column(modifier = Modifier.padding(10.dp)) {
var text by remember { mutableStateOf("") }
TextField(
value = text, // ⽂本
onValueChange = { newText ->
text = imStart { it == '0'};
}, // ⽂本变化事件
)
}
}
5. 最后需要注意的是
var text by remember { mutableStateOf("初始值") }
TextField(value = text, onValueChange = { text = it })
这种 模板是固定的，其中text变量名和初始值可以改变，text须为
by remember { mutableStateOf("") }，value的值必须等于你定义的变量（对应这⾥的text），⽂本发⽣改变之后，需要给你定义的变量重新赋值为改变之后的内容，要不然输⼊内容之后，⽂本框的内容还是没有改变。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。