如何处理可组合项中的键盘位置

Question

好吧，我有一个可组合的函数，一个简单的函数，用户名和密码是输入字段，其下方有一个登录按钮。当我按下用户名输入时，键盘打开并对齐到底部，因此密码和登录重叠，当我按下密码时，键盘与登录按钮重叠，我需要这 3 个元素在每当键盘打开时

@Composable
fun SignInScreen(
    signInViewModel: SignInViewModel = hiltViewModel(),
    onSignInSuccess: (String) -> Unit // Callback with token on success
) {
    val signInState by signInViewModel.signInState.collectAsState()

    var username by remember { mutableStateOf("degustatori") }
    var password by remember { mutableStateOf("paroli123") }
    var errorMessage by remember { mutableStateOf<String?>(null) }

    // Main screen layout
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(1.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth(0.5f) // Make the form take up 90% of the width
                .padding(2.dp), // Padding inside the form
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = R.drawable.georgian_wine), // Replace with your actual image resource name
                contentDescription = "Logo",
                modifier = Modifier
                    .size(200.dp) // Adjust the size as needed
                    .padding(bottom = 24.dp) // Space between the image and the text fields
            )
            Text(text = "Sign In", style = MaterialTheme.typography.headlineMedium)

            Spacer(modifier = Modifier.height(8.dp))

            OutlinedTextField(
                value = username,
                onValueChange = { username = it },
                label = { Text("Username") },
                shape = RoundedCornerShape(16.dp), // Rounded corners for the text field
                modifier = Modifier.fillMaxWidth()
            )

            Spacer(modifier = Modifier.height(16.dp))

            OutlinedTextField(
                value = password,
                onValueChange = { password = it },
                label = { Text("Password") },
                visualTransformation = PasswordVisualTransformation(),
                shape = RoundedCornerShape(16.dp), // Rounded corners for the text field
                modifier = Modifier.fillMaxWidth()
            )

            Spacer(modifier = Modifier.height(24.dp))

            Button(
                onClick = {
                    errorMessage = null // Clear previous error
                    signInViewModel.signIn(username, password)
                },
                modifier = Modifier.fillMaxWidth(),
                shape = RoundedCornerShape(16.dp), // Rounded corners for the button
                colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary) // Change button color
            ) {
                Text("Sign In", color = Color.White) // Change text color to white
            }

            Spacer(modifier = Modifier.height(16.dp))

            // Handle different sign-in states
            when (val state = signInState) {
                is SignInState.Loading -> {
                    CircularProgressIndicator()
                }
                is SignInState.Success -> {
                    LaunchedEffect(Unit) {
                        onSignInSuccess(state.token) // Trigger navigation on success only
                    }
                }
                is SignInState.Error -> {
                    errorMessage = state.message // Set error message
                }
                SignInState.Idle -> {
                    // Initial idle state - no action needed
                }
            }

            // Show error message if present
            errorMessage?.let { error ->
                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    text = error,
                    color = MaterialTheme.colorScheme.error,
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

这是我的代码

我尝试过 gpt 但根本没有帮助

Answer 1

您可以在外部可组合项上应用

imePadding

修饰符，如下所示：

@Composable
fun LoginScreen() {

    val username = rememberTextFieldState("Username")
    val password = rememberTextFieldState("Password")

    Column(
        modifier = Modifier
            .fillMaxSize()
            .imePadding(),
        verticalArrangement = Arrangement.Center
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                modifier = Modifier.size(225.dp),
                imageVector = Icons.Default.Home,
                contentDescription = ""
            )
            TextField(
                state = username,
            )
            Spacer(modifier = Modifier.size(16.dp))
            TextField(
                state = password
            )
            Spacer(modifier = Modifier.size(16.dp))
            FilledTonalButton(
                onClick = {}
            ) {
                Text("Submit")
            }
        }
    }
}

输出：

---

旧答案

要使可组合项完全根据需要向上移动，以便键盘正好位于当前聚焦的

TextField

下方，您可以使用

verticalScroll

和

imePadding

修饰符的组合：

@Composable
fun LoginScreen() {

    val pseudo = rememberTextFieldState("Name")
    val username = rememberTextFieldState("Username")
    val password = rememberTextFieldState("Password")

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.75f)
            .imePadding()
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TextField(
            state = pseudo,
        )
        Spacer(modifier = Modifier.size(450.dp))  // your Image
        TextField(
            state = username,
        )
        Spacer(modifier = Modifier.size(16.dp))
        TextField(
            state = password
        )
        Spacer(modifier = Modifier.size(16.dp))
        Button(
            onClick = {}
        ) {
            Text("Submit")
        }
    }
}

此外，我有必要将以下

windowSoftInputMode

添加到

manifest.xml

：

<activity
    android:name=".MainActivity"
    <!-- ... --->
    android:windowSoftInputMode="adjustNothing"
    android:theme="@style/Theme.ComposePlayground">
</activity>

输出：