无法理解 Compose 中的插入是如何工作的。为什么我这里有这个空间?

问题描述 投票:0回答:1

我正在尝试了解可组合项是如何工作的,但是当我看到一个示例实现了我所拥有的东西,而我所拥有的东西却厚颜无耻地不听我的,这是非常困难的。这基本上是我的可组合函数,其中我有一个脚手架、一个保存图像的列和一个基本上是注册表单的表面。现在,如果你看一下图像,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()
的内容,但无济于事。它在现有空间的基础上增加了更多空间,我想我快要疯了。

android kotlin user-interface android-jetpack-compose user-experience
1个回答
0
投票

因为您将

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())){}
}
© www.soinside.com 2019 - 2024. All rights reserved.