Переполнение композабла не видно в ContextualFlowRow при использовании модификатора verticalScroll.

На чтение 3 мин Опубликовано 01.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Решение
Пояснения

Вопрос или проблема

В моем сценарии я расширяю ItemsContent до максимальной высоты, когда хотя бы один элемент в фокусе, и уменьшаю до 40.dp, когда ни один элемент не в фокусе (чтобы показать только одну строку).

Теперь я пытаюсь реализовать возможность прокрутки к конкретному элементу внутри ContextualFlowRow с помощью модификатора verticalScroll, когда ни один из элементов не в фокусе (видима только одна строка), однако, добавив модификатор verticalScroll, overflow у указанного компонента больше не виден.

Если я уберу модификатор verticalScroll, overflow работает нормально, однако, у меня нет возможности прокрутки вручную. Я также пытался указать параметр maxLines как 1, когда ни один элемент не в фокусе – в этом случае overflow отображается, но у меня нет возможности прокрутки, так как видима только одна строка.

Существует ли способ показать компонент overflow, когда высота установлена на 40.dp (чтобы показать только одну строку) с возможностью прокрутки к любому элементу? Спасибо.

@OptIn(ExperimentalLayoutApi::class)
@Composable
private fun ItemsContent(modifier: Modifier, content: List<String>) {
    val scrollState = rememberScrollState()

    ContextualFlowRow(
        itemCount = content.size,
        modifier = modifier.verticalScroll(scrollState),
        overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
            minRowsToShowCollapse = Int.MAX_VALUE,
            expandIndicator = {
                // Индикатор развертывания
            },
            collapseIndicator = {
                // Пусто
            }
        ),
    ) { _ ->
        // Содержимое
    }

    // Вызов scrollState.scrollTo() с пользовательскими значениями
}

Ответ или решение

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

Ситуация в том, что когда вы добавляете модификатор verticalScroll, он влияет на поведение ваших элементов внутри ContextualFlowRow, что приводит к тому, что элементы переполнения становятся невидимыми. Вероятно, это происходит, потому что verticalScroll не позволяет дочерним элементам выйти за пределы доступной высоты.

Решение

Чтобы решить вашу проблему, вы можете использовать Box для обертывания вашего ContextualFlowRow и overflow элемента. Таким образом, вы сможете объединить возможность прокрутки и отображение переполнения.

Вот пример кода:

@OptIn(ExperimentalLayoutApi::class)
@Composable
private fun ItemsContent(modifier: Modifier, content: List<String>) {
    val scrollState = rememberScrollState()

    // Оборачиваем в Box
    Box(
        modifier = modifier
            .height(40.dp) // Устанавливаем фиксированную высоту
            .horizontalScroll(scrollState) // Убедитесь, что у вас есть горизонтальная прокрутка
    ) {
        // Добавляем контекстный ряд
        ContextualFlowRow(
            itemCount = content.size,
            modifier = Modifier.fillMaxSize(), // Занять всю доступную область
            overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
                minRowsToShowCollapse = Int.MAX_VALUE,
                expandIndicator = {
                    // Индикатор для расширения
                    Icon(Icons.Filled.KeyboardArrowDown, contentDescription = "Expand")
                },
                collapseIndicator = {
                    // Пустое пространство или иконка для сворачивания
                }
            ),
        ) { index ->
            // Контент
            Text(text = content[index])
        }

        // Добавляем индикатор переполнения, который будет виден
        if (content.size > 1) {
            // Здесь вы можете настроить свой индикатор переполнения
            Box(
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 4.dp)
            ) {
                // Переполнение, например, стрелка или иконка
                Icon(Icons.Filled.MoreHoriz, contentDescription = "More items")
            }
        }
    }

    // Логика для прокрутки к элементу
    // scrollState.scrollTo(yourTargetIndex)
}

Пояснения

Использование Box: Благодаря обертыванию в Box, вы можете ограничить высоту вашего ContextualFlowRow, сохраняя при этом его возможность расширяться при необходимости.
Modifier.fillMaxSize(): Это позволит вашему ContextualFlowRow занимать всю доступную область в Box.
Индикатор переполнения: Вы можете добавить индикатор (например, иконку) в правом верхнем углу, который будет виден даже при наличии прокрутки.
Прокрутка к элементу: Вы можете использовать scrollState.scrollTo() для прокрутки к определённым элементам, основываясь на вашем логике.

Эти изменения позволяют вам реализовать функциональность, которую вы хотите, — возможность прокрутки для отображения всех элементов, а также отображение переполнения, даже если высота ограничена.