При нажатии на новую область редактирования он проверяет, так ли это. четко отображается на экране, но ввод текста не приводит к проверке того, что он не прокручен.
Я считаю, что мне не хватает какого-то фундаментального понимания пользовательского интерфейса, поскольку я борюсь с тем, что Я думаю, это должен быть очень простой шаблон пользовательского интерфейса.
Существует две основные проблемы.
- Как гарантировать, что область, в которую пользователь вводит текст, находится на экране? Это действительно относится только к макетам, которые позволяют вам прокручивать наружу. Это чрезвычайно распространенный шаблон, поэтому я полагаю, что это базовая стандартная функция.
- (Необязательно) Если область автоматически отображается на экране, можно ли добавить некоторые отступы к нижней части этой области, чтобы курсор ввода текста не находился прямо над программной клавиатурой. Я хочу, чтобы пользователь видел строку внизу карточки, когда он печатает в нижней части области ввода текста (но она может исчезнуть из поля зрения, если он печатает вверху).
Код: Выделить всё
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
object StackAndroidTextEntryFocusWithLists {
@Composable
fun StackAndroidTextEntryFocusWithListsDisplay() {
MainScaffold() {
EditContent()
}
}
@Composable
private fun MainScaffold(content : @Composable () -> Unit) {
Scaffold {
Box( Modifier.padding(it) ) {
content()
}
}
}
@Composable
private fun EditContent() {
Column(
Modifier
.fillMaxWidth()
.padding(16.dp)
.border(2.dp, Color.Magenta) // highlights bounds
) {
TenEditItems()
}
}
// Code above should be safe (although I may be missing something obvious)
// Code below here would likely need changing to get this to work as intended
@Composable
private fun TenEditItems() {
val intList = (0 .. 10).toList()
AsLazyColumnWithBottomItem(intList)
}
// This may need changing
@Composable
private fun AsLazyColumnWithBottomItem(intList: List) {
LazyColumn {
items(intList) {
EditItemCard()
Spacer(Modifier.padding(8.dp))
}
item {
Spacer(
// Spacing at bottom of list allows user to scroll below text entry if on last item
// NOTE: This behaves strangely as clicking on the text entry area again can reduce the spacing
Modifier
.imePadding()
)
}
}
}
// This may need changing
@Composable
private fun EditItemCard() {
var text by remember { mutableStateOf("")}
OutlinedCard {
Column(
Modifier
.padding(8.dp)
) {
Text("If the user enters any data, the data entry carat must be on screen\n" +
"The list needs to jump if not focused on the right card")
TextField(
modifier = Modifier.fillMaxWidth(),
value = text,
onValueChange = { text = it }
)
// Currently, these lines below are not visible. The keyboard appears just above them
// on the last item in the list
Text("These lines MUST always be visible when editing this card\n" +
"Test by scrolling to last card in the list")
}
}
}
}
Что я пробовал:
- Элемент списка. Ручное использование ScrollState для прокрутки к редактируемой карточке. Это немного работает, но он не знает, где находится курсор, поэтому может перейти к нижней или верхней части карточки и все равно не отображаться. редактируемый текст
- Элемент списка Использование imePadding в разных местах
Интерес №1 – (но не часть вопроса):
Кроме того, есть еще одна проблема, связанная с моим imePadding Spacer. Кажется, что-то странное поведение в конце списка. Когда вы впервые выбираете область редактирования текста (и прокручиваете вниз, насколько это возможно), дополнительная область заполнения становится довольно большой; однако, выбрав текстовое поле редактирования во второй раз, пространство уменьшится примерно на четверть от того, что было. Вот журналы ImeTracker:
Первоначальный щелчок по области редактирования текста:
Код: Выделить всё
ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT_BY_INSETS_API fromUser false
ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT fromUser false
ImeTracker : onShown
Код: Выделить всё
ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT_BY_INSETS_API fromUser false
ImeTracker : onCancelled at PHASE_CLIENT_APPLY_ANIMATION
ImeTracker : onRequestShow at ORIGIN_CLIENT reason SHOW_SOFT_INPUT fromUser false
ImeTracker : onCancelled at PHASE_CLIENT_APPLY_ANIMATION
При публикации этого вопроса на веб-сайте StackOverflow мой вопрос был достаточно длинным. поэтому область ввода текста больше не отображалась на экране при прокрутке вниз (ввод текста выше). Если я прокрутил вниз, а затем ввел символ на клавиатуре с выбранной областью ввода текста, он попытался подпрыгнуть вверх, чтобы показать мне, где я печатаю, но не смог и отобразил верхнюю часть вопроса.
Подробнее здесь: https://stackoverflow.com/questions/792 ... -scrolling
Мобильная версия