Создайте динамическую верхнюю панель приложения.

В этом руководстве объясняется, как создать динамическую верхнюю панель приложения в Compose, параметры которой изменяются при выборе элементов из списка. Вы можете изменять заголовок и действия верхней панели приложения в зависимости от состояния выбора.

Реализовать динамическое поведение верхней панели приложения.

Этот код определяет составную функцию для верхней панели приложения, которая изменяется в зависимости от выбора элемента: 

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

Основные моменты, касающиеся кода.

  • AppBarSelectionActions принимает Set индексов выбранных элементов.
  • Текст topBarText изменяется в зависимости от того, выбраны ли какие-либо элементы.
    • При выборе элементов в TopAppBar отображается текст с указанием количества выбранных элементов.
    • Если вы ничего не выберете, topBarText отобразится «Список элементов».
  • Блок actions определяет действия, отображаемые в верхней панели приложения. Если hasSelection имеет значение true, после текста появляется значок «Поделиться».
  • Лямбда-функция onClick элемента IconButton обрабатывает действие «Поделиться» при нажатии на значок.

Результат

В верхней панели приложения динамически отображается текст «Выбрано 3 элемента» со значком «Поделиться». Этот текст и значок появляются только при выборе элементов.
Рисунок 1. Динамическая верхняя панель приложения с текстом и значком «Поделиться», которые появляются только при выборе элементов.

Интегрировать выбираемый список в динамическую верхнюю панель приложения

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

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        modifier = modifier,
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

Основные моменты, касающиеся кода.

  • Верхняя панель обновляется в зависимости от количества выбранных элементов списка.
  • selectedItems содержит набор индексов выбранных элементов.
  • AppBarMultiSelectionExample использует Scaffold для структурирования экрана.
    • topBar = { AppBarSelectionActions(selectedItems) } устанавливает компонент AppBarSelectionActions в качестве верхней панели приложения. AppBarSelectionActions получает состояние selectedItems .
  • LazyColumn отображает элементы в вертикальном списке, выводя на экран только те элементы, которые необходимы для отображения списка.
  • ListItemSelectable представляет собой выбираемый элемент списка.
    • combinedClickable позволяет обрабатывать как клики, так и длительные нажатия для выбора элементов. Клик выполняет действие, а длительное нажатие на элемент переключает состояние его выбора.

Результат

В верхней динамической панели приложения отображается текст «Выбрано 3 элемента», за которым следует значок «Поделиться». Ниже представлен список из нескольких элементов, три из которых отмечены галочками.
Рисунок 2. Список, интегрированный в динамическую верхнюю панель приложения, с выбранными определенными элементами.

Дополнительные ресурсы