https://kotlinlang.org logo
#compose-ios
Title
# compose-ios
r

Ryan Simon

12/06/2023, 7:50 PM
Hello 👋🏻 , if I want to get my
LazyColumn
to properly add padding to accommodate the software keyboard on iOS, what should I do? I tried adding
imePadding
to my modifier, and it kinda works, but ends up with way more padding than needed and doesn't allow me to scroll all the way to the top. Included a video and code to look at in thread 🧵
Code that powers the UI in the video
a

Alexander Maryanovsky

12/07/2023, 5:31 AM
Don’t do
LocalSoftwareKeyboardController.current?.hide()
in the composition. Composition is supposed to be free of side effects. Put it in a LaunchedEffect.
r

Ryan Simon

12/07/2023, 8:38 PM
good to know, though it does nothing to solve any of my problems as seen in the video
a

Alexander Maryanovsky

12/07/2023, 8:44 PM
Try these: 1. Reverse the order of
imePadding()
and
fillMaxSize()
. 2. Don’t use a
LazyColumn
for a single item (and
fillMaxSize
!)? Just use
Modifier.verticalScroll()
on the
Column
.
2 will probably solve it
If you want to use a
LazyColumn
don’t put items into it that are
fillMaxHeight
.
They should either be fixed-height or have an intrinsic height of their own.
r

Ryan Simon

12/07/2023, 9:29 PM
good tips, thanks. here's what i have now and the UI behavior hasn't changed at all
Copy code
LaunchedEffect(showImage) {
            if (showImage) {
                softwareKeyboardController?.hide()
            }
        }

        LazyColumn(Modifier.imePadding().fillMaxSize()) {
            item {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
the lazy column is here just as a test, and the intention would be to have multiple elements inside it
i'm feeling like this is a bug maybe? cus on Android this works fine
a

Alexander Maryanovsky

12/07/2023, 9:32 PM
Possible, but let’s get it to a clean reproducer before we submit a bug report.
r

Ryan Simon

12/07/2023, 9:33 PM
okay, what would be a clean reproducer in your mind?
a

Alexander Maryanovsky

12/07/2023, 9:43 PM
I vaguely remember seeing a bug report of this. Let me try and find it.
It seems to be one of the issues reported here: https://github.com/JetBrains/compose-multiplatform/issues/3621
Here’s a reproducer:
Copy code
@Composable
fun IosApp() {
    MaterialTheme {
        LazyColumn(Modifier.imePadding().fillMaxSize().background(Color.Yellow)) {
            items(10) {
                ListItem()
            }
        }
    }
}


@Composable
private fun ListItem() {
    var text by remember { mutableStateOf("") }
    TextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier.fillMaxWidth().padding(vertical = 40.dp, horizontal = 20.dp)
    )
}
I submitted a bug here
r

Ryan Simon

12/11/2023, 4:38 PM
Thanks for doing that 🙏🏻
4 Views