Жесты прокрутки вверх и вниз не распознаются в нужной части экрана

Вопросы и ответы

Я пытаюсь изменить тип Плавающей Кнопки Действия в зависимости от жестов свайпа вверх и вниз. Но жесты обнаруживаются только на краю экрана, а не внутри каркаса. Я хочу обнаруживать жесты свайпа вверх и вниз в области содержимого каркаса.

Вот код, который я пробовал ->

import android.util.Log
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.AnimationSpec
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectVerticalDragGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Create
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.MailOutline
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun MailScreen() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    val example = listOf("1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1",)

    //Отслеживаем, расширена ли FAB
    var isExtended by remember {
        mutableStateOf(false)
    }

    Box (
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectVerticalDragGestures { _, dragAmount ->
                    //Обнаружьте свайп вверх или вниз
                    if (dragAmount < 0) {
                        //Свайп вверх
                        isExtended = true
                    } else if (dragAmount > 0) {
                        //Свайп вниз
                        isExtended = false
                    }
                }
            }
    ) {

        ModalNavigationDrawer(
            drawerState = drawerState, // Используйте состояние ModalDrawer
            drawerContent = {
                DrawerItemUiLayout() // СодержимоеDrawer
            },
            gesturesEnabled = true, // Разрешить жесты для открытия/закрытия ящика
            scrimColor = Color.Black.copy(alpha = 0.32f) // Затемнение с эффектом затенения
        ) {

            Scaffold(
                modifier = Modifier.windowInsetsPadding(WindowInsets.systemBars),
                topBar = {
                    TopBarOne(
                        openDrawer = {
                            scope.launch {
                                drawerState.open() // Открываем ящик с встроенной анимацией
                            }
                        }
                    )
                },
                floatingActionButton = {
                    if (isExtended) {
                        Log.d("FAB","значение: $isExtended")
                        ExtendedFloatingActionButton(
                            onClick = { /*TODO*/ },
                            modifier = Modifier.background(Color.Cyan)
                        ) {
                            Icon(imageVector = Icons.Default.Create, contentDescription = null)
                            Text(text = "Создать")
                        }
                    } else {
                        Log.d("FAB","значение: $isExtended")

                        FloatingActionButton(onClick = { /*TODO*/ }) {
                            Icon(imageVector = Icons.Default.Create, contentDescription = null)
                        }
                    }
                }
            ) { innerPadding ->
                LazyColumn(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(innerPadding)
                ) {
                    // Основное содержимое здесь
                    items(example) { item: String ->
                        Text(text = item)
                    }
                }
            }

        }
    }
}

Я пытался использовать ChatGPT, но он дает такие решения, как
Обеспечьте полное покрытие: Модификатор pointerInput применяется к Scaffold, чтобы обеспечить его полное покрытие экрана.

Проверьте на реальном устройстве: Жесты свайпа могут иногда вести себя по-разному в эмуляторе и на реальном устройстве. Убедитесь, что вы тестируете на реальном устройстве или эмуляторе для точного поведения.

Проверьте на наличие помех: Убедитесь, что другие компоненты или наложения не перехватывают события касания. Scaffold с pointerInput должен быть верхним уровнем композиции в области содержимого экрана.

Но я пытался это сделать, и ничего не сработало. Пожалуйста, помогите мне решить эту проблему.

Ответ

Проблема с тем, что жесты свайпа вверх и вниз не распознаются в нужной области экрана, может быть вызвана несколькими факторами. Давайте рассмотрим ваш код и предложим решения.

Решение:

  1. Переместите pointerInput в LazyColumn:
    При использовании циклического списка (LazyColumn), если вы применяете модификатор pointerInput к родительскому композиту (в данном случае Box), он может не срабатывать, если другие элементы внутри LazyColumn перехватывают события касания. Переместите модификатор pointerInput внутрь LazyColumn, чтобы он распознавал жесты.

  2. Добавление жестов в LazyColumn:
    Это позволит вашему LazyColumn обрабатывать жесты свайпа, даже если внутри него есть прокрутка.

Вот обновленный фрагмент вашего кода:

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .padding(innerPadding)
        .pointerInput(Unit) {
            detectVerticalDragGestures { _, dragAmount ->
                // Обработка свайпов
                if (dragAmount < 0) {
                    // Свайп вверх
                    isExtended = true
                } else if (dragAmount > 0) {
                    // Свайп вниз
                    isExtended = false
                }
            }
        }
) {
    // Основной контент здесь
    items(example) { item: String ->
        Text(text = item)
    }
}

Дополнительные рекомендации:

  1. Проверка размеров интерфейса:
    Убедитесь, что ваш интерфейс правильно адаптируется под размеры экрана. Иногда элементы могут перекрывать друг друга, вызывая проблемы с распознаванием жестов. Используйте инструмент отладки для проверки границ элементов, чтобы убедиться, что все они правильно размещены.

  2. Тестирование на реальном устройстве:
    Если вы работаете в эмуляторе, иногда он может вести себя иначе, чем реальное устройство. Всегда лучше тестировать жесты на физическом устройстве.

  3. Проверка других элементов:
    Убедитесь, что никакие другие композиты и элементы интерфейса не перехватывают события касания. Проверьте, нет ли наложенных слоев или непредвиденных сонов, которые могут блокировать взаимодействие.

Заключение:

Перемещение pointerInput внутрь LazyColumn должно помочь решить вашу проблему с распознаванием жестов. Если проблема все еще сохраняется, попробуйте дополнительно тестировать интерфейс на реальных устройствах и проверять расположение всех элементов интерфейса.

Оцените материал
Добавить комментарий

Капча загружается...