insetsx
insetsx copied to clipboard
Insets padding issue in iOS
I want to keep the AppBar
fixed and scroll up the screen/list when the keyboard opens.
I want to do this when a TextField
is clicked.
So I have added the following:
In the Scaffold
:
Scaffold(
modifier = Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical)
),
scaffoldState = scaffoldState,
topBar = {
TaskBoardAppBar(
isExpandedScreen = isExpandedScreen,
onBackClick = onBackClick,
title = viewModel.boardInfo.value.second,
navigateToChangeBgScreen = { passedString -> navigateToChangeBgScreen(passedString) },
onHamBurgerMenuClick = { expandedPanel = !expandedPanel },
onSaveClicked = { saveCardClicked = true },
editModeEnabled = editModeEnabled
)
},...
And in the TextField
:
TextField(
modifier = Modifier.imePadding(),
value = editedTitle.value,
onValueChange = { editedTitle.value = it }
)
In Android, it's looking good and I'm able to achieve the desired behavior.
But, in iOS, the following are observed, when the keyboard opens:
- The AppBar is scrolled up along with the entire scaffold/screen. So it is no more visible.
- A large padding comes above the keyboard.
Please find the screenshot of the comparison, when run in simulators:
Left - Android Right - iOS
In iOS, the window will automatically move if the focused element is obscured by the software keyboard. But we can not disable it. This is a problem on the Compose Multiplatform side, and I could not come up with a workaround. https://github.com/JetBrains/compose-multiplatform/issues/3128
Therefore, the ime-related API is experimental.
Thanks, @mori-atsushi. Is there any workaround for now, till there is no proper solution from Compose Multiplatform?
@pushpalroy Currently I don't know of any workaround. In iOS, it may be better to use the default behavior instead of using ime insets.