TextField
Compose 中的TextField，是文本输入框控件，样式为Android现有库中的EditText的样式，具体用法中会涉及到状态的使用
TextField 属性列表
| 属性 | 作用 | 示例 |
|---|---|---|
| value | 输入框内容 | "hello" |
| onValueChange | 输入框内容改变事件 | { //it 为改变后的文本} |
| placeholder | hint提示语 | "请输入xxxxx" |
| backgroundColor | 背景颜色 | Color.Yellow |
| visualTransformation | 输入内容的格式 | PasswordVisualTransformation()//密码样式 |
| leadingIcon | 前面的图标 | { Icon(Icons.Filled.AccountBox) } |
| trailingIcon | 后面的图标 | { Icon(Icons.Filled.AccountCircle)} |
| keyboardOptions | 暂时不知道怎么用 | KeyboardOptions(keyboardType = KeyboardType.Phone, imeAction =ImeAction.Done//ime行为)//设置了没有发现效果 |
代码实例
class TextFieldActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ShowTextField()
}
}
@Composable
fun ShowTextField() {
var text by savedInstanceState { "" }
TextField(
value = text,
onValueChange = {
text = it
},//文本改变监听
modifier = Modifier
.padding(10.dp)
.fillMaxWidth(),
// label = { Text(text = "标签") },//顶部的提示语
placeholder = { Text(text = "请输入内容") },//hint提示语
backgroundColor = Color.Yellow,//背景颜色
visualTransformation = PasswordVisualTransformation(),//输入样式
leadingIcon = { Icon(Icons.Filled.AccountBox) },//前面的图标
trailingIcon = {
Icon(
Icons.Filled.AccountCircle,
modifier = Modifier.clickable(onClick = {
text = ""
})
)
},//后面的图标
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Phone,
imeAction = ImeAction.Done//ime行为
)
)
}
}
运行效果：
device-2021-02-03-215535.png
