Jetpack Compose - прокрутите до выбранного компонента в столбце

Question

У меня такой интерфейс:

      val scrollState = rememberScrollState()
        Column(
            modifier = Modifier
                .fillMaxSize(1F)
                .padding(horizontal = 16.dp)
                .verticalScroll(scrollState)
        ) {

            TextField(...)
 // multiple textfields
             TextField(
                        //...
                        modifier = Modifier.focusOrder(countryFocus).onFocusChanged {
                            if(it == FocusState.Active) {
                               // scroll to this textfield
                            }
                        },
                    )




         }

У меня есть несколько текстовых полей в этом столбце, и когда одно из них сфокусировано, я хочу прокрутить столбец до него. В scrollState есть метод scrollState.smoothScrollTo(0f) но я понятия не имею, как получить сфокусированную позицию TextField.

Answer 1

Также вы можете использовать BringIntoViewRequester

      //
val bringIntoViewRequester = remember { BringIntoViewRequester() }
val coroutineScope = rememberCoroutineScope()
//--------
TextField( ..., modifier = Modifier.bringIntoViewRequester(bringIntoViewRequester)
.onFocusEvent {
                        if (it.isFocused) {
                            coroutineScope.launch {
                                bringIntoViewRequester.bringIntoView()
                            }
                        }
                    }

Answer 2

В Compose есть новая вещь, которая называется RelocationRequester. Это решило проблему для меня. У меня есть что-то вроде этого внутри моего настраиваемого TextField.

      val focused = source.collectIsFocusedAsState()
val relocationRequester = remember { RelocationRequester() }
val ime = LocalWindowInsets.current.ime
if (ime.isVisible && focused.value) {
    relocationRequester.bringIntoView()
}

Answer 3

Похоже, что с помощью LazyColumn а также LazyListState.animateScrollToItem() вместо этого может быть хорошим вариантом для вашего случая.

Ссылка: https://developer.android.com/jetpack/compose/lists#control-scroll-position

Кстати, спасибо за информацию о onGloballyPositioned()модификатор. Я искал решение для нормального Columnдело. Это сэкономило мне много времени!

Answer 4

Вот некоторый код, который я использовал, чтобы убедиться, что поля в моей форме не обрезаются клавиатурой:

От: переполнение стека - определить, когда клавиатура открыта

      enum class Keyboard {
Opened, Closed
}

@Composable
fun keyboardAsState(): State<Keyboard> {
    val keyboardState = remember { mutableStateOf(Keyboard.Closed) }
    val view = LocalView.current
    DisposableEffect(view) {
    val onGlobalListener = ViewTreeObserver.OnGlobalLayoutListener {
        val rect = Rect()
        view.getWindowVisibleDisplayFrame(rect)
        val screenHeight = view.rootView.height
        val keypadHeight = screenHeight - rect.bottom
        keyboardState.value = if (keypadHeight > screenHeight * 0.15) {
            Keyboard.Opened
        } else {
            Keyboard.Closed
        }
    }
    view.viewTreeObserver.addOnGlobalLayoutListener(onGlobalListener)

    onDispose {
        
    view.viewTreeObserver.removeOnGlobalLayoutListener(onGlobalListener)
         }
    }

    return keyboardState
}

а затем в моем составном:

      val scrollState = rememberScrollState()
val scope = rememberCoroutineScope()

val isKeyboardOpen by keyboardAsState()

if (isKeyboardOpen == Keyboard.Opened) {
    val view = LocalView.current
    val screenHeight = view.rootView.height
    scope.launch { scrollState.scrollTo((screenHeight * 2)) }
}

Surface(modifier = Modifier
    .fillMaxHeight()
    .verticalScroll(scrollState),
    
)  {
  //Rest of your Composables, Columns, Rows, TextFields, Buttons

  //add this so the screen can scroll up and keyboard cannot cover the form fields - Important!
 /*************************************************/
  if (isKeyboardOpen == Keyboard.Opened) {
     Spacer(modifier = Modifier.height(140.dp))
  }

}

Надеюсь, это поможет кому-то. Я использовал:

      val bringIntoViewRequester = remember { BringIntoViewRequester() }
val scope = rememberCoroutineScope()
val view = LocalView.current
DisposableEffect(view) {
    val listener = ViewTreeObserver.OnGlobalLayoutListener {
        scope.launch { bringIntoViewRequester.bringIntoView() }
    }
    view.viewTreeObserver.addOnGlobalLayoutListener(listener)
    onDispose { view.viewTreeObserver.removeOnGlobalLayoutListener(listener) }
}
Surface(modifier.bringIntoViewRequester(bringIntoViewRequester)) {

///////////rest of my composables
}

Но это не сработало.

Answer 5

Для регулярногоColumn, вы можете использовать следующую функцию расширения:

Вот полный исходный код Gist

      fun Modifier.bringIntoView(
    scrollState: ScrollState
): Modifier = composed {
    var scrollToPosition by remember {
        mutableStateOf(0f)
    }
    val coroutineScope = rememberCoroutineScope()
    this
        .onGloballyPositioned { coordinates ->
            scrollToPosition = scrollState.value + coordinates.positionInRoot().y
        }
        .onFocusEvent {
            if (it.isFocused) {
                coroutineScope.launch {
                    scrollState.animateScrollTo(scrollToPosition.toInt())
                }
            }
        }
}