我有一个写为@Composable的对话框。内部有一个可滚动的Column对象,带有2个TextField和Buttons(用于登录)。当用户输入错误信息时,顶部会出现错误文本。当TextFields具有焦点时,将显示android键盘。有了errorText,可能对话框太大了,以至于当键盘打开并开始滚动时(就像预期的那样)无法显示所有内容。但是当键盘关闭时,我希望对话框再次测量它的高度,以扩大高度并显示孔内容,而不需要滚动。因此,我假设如果键盘没有重新组合UI,则切换状态。
有没有办法在切换键盘时重新组合对话框?
下面是对话框的代码:
@Composable
fun Dialog() {
val theme by currentTheme.collectAsMutableState()
val error by rememberSaveable { mError }
var emailError by rememberSaveable { mutableStateOf(context.getString(R.string.empty_error_text)) }
var passwordError by rememberSaveable { mutableStateOf(context.getString(R.string.empty_error_text)) }
var email = ""
var password = ""
Dialog(
onDismissRequest = { onDismissRequest.invoke() },
DialogProperties(dismissOnClickOutside = false)
) {
Surface(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
shape = RoundedCornerShape(size = 10.dp)
) {
Column(modifier = Modifier.padding(16.dp)) {
Row(
modifier = Modifier.fillMaxWidth()
) {
Image(
modifier = verticalGradientModifier(theme).size(25.dp),
painter = painterResource(id = R.mipmap.icons8_login_125px),
contentDescription = stringResource(R.string.log_in_online)
)
Text(
modifier = horizontalGradientModifier(theme)
.align(CenterVertically)
.padding(start = 5.dp),
text = stringResource(R.string.log_in_online),
fontSize = 16.sp,
fontWeight = FontWeight.Bold
)
}
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
if (error.isNotEmpty()) {
Box(
modifier = Modifier
.fillMaxWidth()
.padding(5.dp)
.border(1.dp, Color.Red, RoundedCornerShape(10))
) {
Text(
modifier = Modifier.padding(5.dp),
text = error,
color = Color.Red
)
}
}
InputView(
title = stringResource(R.string.email_label),
description = stringResource(R.string.login_email_description),
icon = R.mipmap.icons8_mail_125px,
error = emailError,
important = true
) {
email = it
emailError = if (it.isNotEmpty()) {
""
} else {
context.getString(R.string.empty_error_text)
}
}
InputView(
title = stringResource(R.string.label_password),
description = stringResource(R.string.login_password_description),
icon = R.mipmap.icons8_password_125px,
error = passwordError,
inputType = KeyboardType.Password,
important = true
) {
password = it
passwordError = if (it.isNotEmpty()) {
""
} else {
context.getString(R.string.empty_error_text)
}
}
Row(
modifier = Modifier
.align(CenterHorizontally)
.padding(10.dp)
) {
TextButton(
modifier = Modifier
.padding(5.dp)
.border(
width = 1.dp,
brush = horizontalGradientBrush(theme),
shape = RoundedCornerShape(percent = 10)
),
enabled = passwordError.isEmpty() && emailError.isEmpty(),
onClick = {
Repository.execute {
Repository.login(email, password) { success, _ ->
if (success) {
onDismissRequest.invoke()
} else {
//show error banner
mError.value = "Ether email or password was wrong."
}
}
}
}) {
Image(
modifier = verticalGradientModifier(theme).size(25.dp),
painter = painterResource(id = R.mipmap.icons8_login_125px),
contentDescription = stringResource(R.string.title_login)
)
Text(
modifier = horizontalGradientModifier(theme).padding(start = 5.dp),
text = stringResource(R.string.title_login)
)
}
Text(
modifier = horizontalGradientModifier(theme)
.padding(5.dp)
.align(CenterVertically),
text = "or"
)
TextButton(
modifier = Modifier
.padding(5.dp)
.border(
width = 1.dp,
brush = horizontalGradientBrush(theme),
shape = RoundedCornerShape(percent = 10)
),
onClick = {
//open Sign-In dialog
}) {
Image(
modifier = verticalGradientModifier(theme).size(25.dp),
painter = painterResource(id = R.mipmap.icons8_create_125px),
contentDescription = stringResource(R.string.sign_in)
)
Text(
modifier = horizontalGradientModifier(theme).padding(start = 5.dp),
text = stringResource(R.string.sign_in)
)
}
}
}
}
}
}
}
1条答案
按热度按时间bqucvtff1#
您可以使用
WindowInsets.isImeVisible
侦听键盘状态并进行相应的更改。示例代码
**注意:**为了返回正确的值,您应该设置
我已经在
setContent{}
之前的活动中设置了这个来源:https://stackoverflow.com/a/73358604/9636037
请参考此答案以了解更高级的用例,如跟踪键盘打开和关闭。