JetpackCompose从入门到实战学习笔记5——TextFixed的简单使用
TextField 允许用户输入和修改文字。TextField 实现分为两个级别：
TextField是 Material Design 实现。我们建议您选择此实现，因为它遵循的是
Material Design 指南：
BasicTextField 允许用户通过硬件或软件键盘编辑文本，但没有提供提示或占位符等装饰。
1.普通的输入框
TextField(
modifier = Modifier
.padding(horizontal = 10.dp)
.background(Color.White, CircleShape)
.height(100.dp)
.fillMaxWidth(),
value = username,
onValueChange = {
username = it
},
label = { Text("用户名") },
leadingIcon = {
Icon(
imageVector = Icons.Filled.AccountBox,
contentDescription = stringResource(
id = R.string.description
)
)
}
)
TextField(
modifier = Modifier
.padding(horizontal = 10.dp)
.background(Color.White, CircleShape)
.height(100.dp)
.fillMaxWidth(),
value = password,
onValueChange = {
password = it
},
label = { Text("密码") },
trailingIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_visibility_24),
contentDescription =
stringResource(id = R.string.description)
)
}
}
)
2.效果预览：
3.带边框的输入框：
OutlinedTextField(
modifier = Modifier
.padding(horizontal = 10.dp)
.background(Color.White, CircleShape)
.height(100.dp)
.fillMaxWidth(),
value = username,
onValueChange = {
username = it
},
label = { Text("用户名") },
leadingIcon = {
Icon(
imageVector = Icons.Filled.AccountBox,
contentDescription = stringResource(
id = R.string.description
)
)
}
)
4.效果预览：
5.仿B站风格输入框：
Box(
modifier = Modifier
.background(Color(0xFFD3D3D3))
.padding(50.dp)
) {
BasicTextField(
value = text,
onValueChange = { text = it },
decorationBox = {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(vertical = 2.dp, horizontal = 8.dp)
) {
Icon(imageVector = Icons.Filled.Search, contentDescription = "")
Box(
modifier = Modifier
.padding(horizontal = 10.dp)
.weight(1f),
contentAlignment = Alignment.CenterStart
) {
if (text.isEmpty()) {
Text(
text = "输入点东西看看吧~",
style = TextStyle(Color(0, 0, 0, 128))
)
}
it()
}
if (text.isNotEmpty()) {
IconButton(
onClick = { text = "" },
modifier = Modifier.size(16.dp)
) {
Icon(
imageVector = Icons.Filled.Close,
contentDescription = ""
)
}
}
}
},
modifier = Modifier
.padding(horizontal = 10.dp)
.background(Color.White, CircleShape)
.height(60.dp)
.fillMaxWidth()
)
}
6.效果预览：
7.修改背景颜色的搜索框:
Box(
modifier = Modifier
.background(Color(0xFFFFFFFF))
.padding(80.dp)
.fillMaxSize()
) {
BasicTextField(
value = text,
onValueChange = { text = it },
decorationBox = {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(vertical = 2.dp, horizontal = 8.dp)
) {
Icon(imageVector = Icons.Filled.Search, contentDescription = "")
Box(
modifier = Modifier
.padding(horizontal = 10.dp)
.weight(1f),
contentAlignment = Alignment.CenterStart
) {
if (text.isEmpty()) {
Text(
text = "百度一下~",
style = TextStyle(Color(0, 0, 0, 128))
)
}
it()
}
if (text.isNotEmpty()) {
IconButton(
onClick = { text = "" },
modifier = Modifier.size(16.dp)
) {
Icon(
imageVector = Icons.Filled.Close,
contentDescription = ""
)
}
}
}
},
modifier = Modifier
.padding(horizontal = 10.dp)
.background(Color.Red, CircleShape)
.height(100.dp)
.fillMaxWidth()
)
}
