我正在尝试了解可组合项是如何工作的,但是当我看到一个示例实现了我所拥有的东西,而我所拥有的东西却厚颜无耻地不听我的,这是非常困难的。这基本上是我的可组合函数,其中我有一个脚手架、一个保存图像的列和一个基本上是注册表单的表面。现在,如果你看一下图像,Android 有一个手势导航空间,这只是为了解释手势以供系统管理。我在活动类中启用了边缘到边缘,我将 softInputMode 的活动属性设置为“adjustResize”,我似乎无法找到为什么该空间被绘制出来,我从所有修饰符中删除了每个 .imePadding() ,但那个空间仍然存在。我可能很笨,看不到解决方案,我希望有人照亮我愚蠢的大脑。
@Composable
fun RegisterScreen(
viewModel: RegisterCredentialsViewModel
){
Shapes.setStatusBar()
val snackbarHostState = remember { SnackbarHostState() }
val isEnabledInternet by viewModel.isEnabledInternet.observeAsState(null)
val isEnabledRegister by viewModel.isEnabledRegister.observeAsState(null)
val registerResult by viewModel.registerFormResult.observeAsState(null)
LaunchedEffect(registerResult) {
registerResult?.let {
if (it.show) { // Only show Snackbar for error messages
snackbarHostState.showSnackbar(
message = it.message,
withDismissAction = registerResult!!.withDismissAction,
duration = registerResult!!.duration
)
it.show = false
}
}
}
Scaffold(
modifier = Modifier
.fillMaxSize(),
containerColor = hearty_theme_light_primary,
snackbarHost = {
SnackbarHost(
hostState = snackbarHostState
) { data ->
Snackbar(
snackbarData = data,
containerColor = registerResult!!.color
)
}
}
) {
Column (modifier = Modifier.padding(it)){
Image(
painter = painterResource(
when (isEnabledInternet!!) {
true -> R.drawable.img_signup_art
else -> R.drawable.no_internet
}
),
contentDescription = "Register greet art",
modifier = Modifier
.fillMaxWidth()
.padding(all = 15.dp)
.weight(.3f)
)
Surface(
shape = RoundedCornerShape(
topStart = 25.dp,
topEnd = 25.dp
),
modifier = Modifier
.fillMaxWidth()
.weight(.7f)
) {
Column(
modifier = Modifier
// .verticalScroll(rememberScrollState())
// .imePadding()
.padding(horizontal = 25.dp)
.padding(top = 25.dp),
verticalArrangement = Arrangement.SpaceBetween
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(top = 10.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
var user by rememberSaveable { mutableStateOf("") }
var pass by rememberSaveable { mutableStateOf("") }
var repass by rememberSaveable { mutableStateOf("") }
var email by rememberSaveable { mutableStateOf("") }
val acceptedRegex = Regex("[\\w*.,<>?!'\"\\|/-=+@#$%^&()\\[\\]{}]*")
OutlinedTextField(
modifier = Modifier
.fillMaxWidth(),
value = user,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 32) {
user = newText
viewModel.updateField(
CredentialsField.USERNAME,
user
)
}
}
},
placeholder = { Text("...", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterUsername)) },
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Ascii,
imeAction = ImeAction.Next
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth(),
textFieldValue = user,
maxLength = 32
)
OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
value = pass,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 32) {
pass = newText
viewModel.updateField(
CredentialsField.PASSWORD,
pass
)
}
}
},
placeholder = { Text("***", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterPassword)) },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Next
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth(),
textFieldValue = pass,
maxLength = 32
)
OutlinedTextField(
modifier = Modifier
.fillMaxWidth(),
value = repass,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 32) {
repass = newText
viewModel.updateField(
CredentialsField.REPASSWORD,
repass
)
}
}
},
placeholder = { Text("***", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterRepeatPassword)) },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Next
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth(),
textFieldValue = repass,
maxLength = 32
)
OutlinedTextField(
modifier = Modifier
.fillMaxWidth(),
value = email,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 128) {
email = newText
viewModel.updateField(CredentialsField.EMAIL, email)
}
}
},
placeholder = { Text("***@***.com", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterEmail)) },
visualTransformation = VisualTransformation.None,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth().padding(bottom = 15.dp),
textFieldValue = email,
maxLength = 128
)
Button(
onClick = {
run {
viewModel.registerClick()
}
},
shape = RoundedCornerShape(12.dp),
modifier = Modifier
.fillMaxWidth(),
enabled = isEnabledRegister!!,
colors = ButtonColors(
containerColor = hearty_theme_light_primary,
contentColor = hearty_theme_light_onPrimary,
disabledContainerColor = hearty_theme_light_primary.copy(alpha = 0.5f),
disabledContentColor = hearty_theme_light_onPrimary.copy(alpha = 0.5f)
),
contentPadding = PaddingValues(vertical = 15.dp),
content = {
Text(
text = stringResource(R.string.buttonRegister).uppercase(),
color = Color.White,
fontSize = 20.sp,
fontWeight = FontWeight.ExtraBold
)
})
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 15.dp, bottom = 15.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = stringResource(R.string.formRegisterToLogin),
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Normal
)
TextButton(
onClick = { viewModel.isReadyForLoginActivity.value = true },
contentPadding = PaddingValues(5.dp),
enabled = isEnabledRegister!!,
content = {
Text(
text = stringResource(R.string.buttonLogin).uppercase(),
color = hearty_theme_light_primary,
fontSize = 16.sp,
fontWeight = FontWeight.ExtraBold,
fontStyle = FontStyle.Italic
)
}
)
}
}
}
}
}
}
我尝试向每个可组合部件、柱、曲面添加类似
.imePadding()
的内容,但无济于事。它在现有空间的基础上增加了更多空间,我想我快要疯了。
因为您将
Scaffold
提供的插入应用到您的可组合项中。它为可组合内容的顶部和底部添加了填充。
Scaffold(
modifier = Modifier
.fillMaxSize(),
containerColor = hearty_theme_light_primary,
snackbarHost = {
SnackbarHost(
hostState = snackbarHostState
) { data ->
Snackbar(
snackbarData = data,
containerColor = registerResult!!.color
)
}
}
) {
Column(modifier = Modifier.padding(it)){} // HERE !!!!
}
如果您想控制要将插图应用到哪一侧,可以使用
padding
修饰符的命名参数(顶部、底部...)将其仅应用到特定一侧
这是一个示例,其中我仅将插图应用于顶部,因此您看到的底部填充将被删除:
Scaffold(
modifier = Modifier
.fillMaxSize(),
containerColor = hearty_theme_light_primary,
snackbarHost = {
SnackbarHost(
hostState = snackbarHostState
) { data ->
Snackbar(
snackbarData = data,
containerColor = registerResult!!.color
)
}
}
) {
Column(modifier = Modifier.padding(top = it.calculateTopPadding())){}
}