Как сохранить верхнюю панель неподвижной в Jetpack Compose, когда отображается клавиатура?Android

Форум для тех, кто программирует под Android
Ответить Пред. темаСлед. тема
Anonymous
 Как сохранить верхнюю панель неподвижной в Jetpack Compose, когда отображается клавиатура?

Сообщение Anonymous »

Я столкнулся с проблемой с поведением макета на экране чата с помощью Jetpack Compose. У меня есть Scaffold, содержащий TopAppBar, BottomBar с TextField и LazyColumn между ними для содержимого чата. Когда клавиатура появляется после нажатия на TextField в BottomBar, весь экран, включая TopAppBar, смещается вверх. Я стремлюсь к поведению, аналогичному приложениям для обмена сообщениями, таким как WhatsApp, где TopAppBar остается фиксированным, а с помощью клавиатуры перемещаются только BottomBar и LazyColumn (содержимое чата).
Вот фрагмент мой текущий код:
Scaffold(
topBar = {

},
bottomBar = {
// CustomNavBar (BottomBar) implementation containing a TextField for typing messages
}
) { paddingValues ->
// Box containing the content of the chat screen (LazyColumn)
Box(
modifier = Modifier.padding(
top = paddingValues.calculateTopPadding(),
bottom = paddingValues.calculateBottomPadding()
)
) {
// Chat content (OneToOneChatScreen or GroupChatScreen) displayed within LazyColumn
}
}


У меня также есть проблема с нижней панелью: между DropDownItems и строкой, которая имеет TextField, остается разрыв, когда мое DropDownMenu развернуто.
Мой customBottomBar

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun CustomNavBar(
allSendersContactMethods: List
) {
var messageText by remember { mutableStateOf("") }
val showSendButton: Boolean by remember { derivedStateOf { messageText.isNotEmpty() } }
var sendersContactMethodNumber: Int by remember { mutableIntStateOf(1) }
var expanded: Boolean by remember { mutableStateOf(false) }
var selectedSendersContactMethod by remember { mutableStateOf(allSendersContactMethods.first()) }

Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.End
) {
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.fillMaxWidth()

) {
allSendersContactMethods.forEachIndexed { index, method ->
DropdownMenuItem(
onClick = {
sendersContactMethodNumber = index + 1
selectedSendersContactMethod = method
expanded = false
},
text = {
Text(text = method)
},
)
}
}

Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 4.dp),
verticalAlignment = Alignment.CenterVertically
) {
TextField(
value = messageText,
onValueChange = { messageText = it },
modifier = Modifier
.weight(1f)
.background(
shape = CircleShape,
color = MaterialTheme.colorScheme.inverseOnSurface
)
.padding(horizontal = 8.dp),
placeholder = { Text(text = "Type a message") },
maxLines = 4,
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
containerColor = Color.Transparent
),
trailingIcon = {

Row(
verticalAlignment = Alignment.CenterVertically
) {

Text(
text = "$sendersContactMethodNumber",
fontSize = 14.sp,
color = MaterialTheme.colorScheme.primary,
modifier = Modifier
.clickable { expanded = true }
.border(
1.5.dp, MaterialTheme.colorScheme.primary,
RoundedCornerShape(4.dp)
)
.padding(vertical = 1.dp, horizontal = 4.dp)
)

if (showSendButton) {
Spacer(modifier = Modifier.width(4.dp))
IconButton(onClick = { /* Handle send action */ }) {
Icon(
Icons.Outlined.Send,
contentDescription = "Send",
tint = MaterialTheme.colorScheme.primary
)
}
}
}
}
)
}
}

}


Подробнее здесь: https://stackoverflow.com/questions/777 ... oard-is-di
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Android»