Карта

Composable-функция Card выступает в качестве контейнера Material Design для вашего интерфейса. Обычно на карточке представлен один фрагмент контента. Вот несколько примеров:

  • Товар в приложении для покупок.
  • Новость в новостном приложении.
  • Сообщение в приложении для общения.

Именно фокус на одном элементе контента отличает Card от других контейнеров. Например, Scaffold обеспечивает общую структуру всего экрана. Карточка – это, как правило, небольшой элемент пользовательского интерфейса в более крупном макете, тогда как компонент макета, например Column или Row, предоставляет более простой и общий API.

Приподнятая карточка с текстом и значками.
Рисунок 1. Пример карточки с текстом и значками.

Базовый вариант

Card работает так же, как и другие контейнеры в Compose. Вы объявляете его содержимое, вызывая в нем другие составные элементы. Например, в приведенном ниже коде Card содержит вызов Text:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Расширенная реализация

Определение Card в API приведено в справочной документации. Он определяет несколько параметров, позволяющих настраивать внешний вид и поведение компонента.

Вот некоторые ключевые параметры:

  • elevation – добавляет тень к компоненту, чтобы он выглядел приподнятым над фоном.
  • colors – использует тип CardColors, чтобы задать цвет по умолчанию для контейнера и дочерних элементов.
  • enabled. Если вы передадите для этого параметра значение false, карточка будет отключена и не будет реагировать на действия пользователя.
  • onClick. Обычно элемент Card не принимает события кликов. Поэтому основная перегрузка, на которую следует обратить внимание, – это та, которая определяет параметр onClick. Используйте эту перегрузку, если хотите, чтобы ваша реализация Card реагировала на нажатия пользователя.

В примере ниже показано, как использовать эти параметры, а также другие распространенные параметры, такие как shape и modifier.

Заполненная карточка

Ниже приведен пример реализации заполненной карточки.

Ключевым моментом здесь является использование свойства colors для изменения цвета заливки.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}

Вот как это выглядит:

Карточка заполнена цветом варианта поверхности из тематического оформления Material Design.
Рисунок 2. Пример заполненной карточки.

Карточка с повышенным приоритетом

В следующем фрагменте кода показано, как реализовать приподнятую карточку. Используйте специальную composable-функцию ElevatedCard.

Свойство elevation позволяет управлять внешним видом высоты и тени.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}

Вот как это выглядит:

Карточка приподнята над фоном приложения и отбрасывает тень.
Рисунок 3. Пример карточки с повышенным приоритетом.

Карточка с контуром

Ниже приведен пример карточки с контуром. Используйте специальную composable-функцию OutlinedCard.

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}

Вот как это выглядит:

Карточка обведена тонкой черной рамкой.
Рисунок 4. Пример карточки с контуром.

Ограничения

Карточки не имеют встроенных действий прокрутки или закрытия, но могут интегрироваться в составные элементы, предлагающие эти функции. Например, чтобы реализовать жест смахивания для закрытия карточки, интегрируйте ее с composable-функцией SwipeToDismiss. Чтобы интегрировать с прокруткой, используйте модификаторы прокрутки, например verticalScroll. Подробную информацию вы найдете в документации по Scroll.

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