Карта

Компонуемый элемент Card служит контейнером Material Design для вашего пользовательского интерфейса. Карточки обычно представляют собой единый, связный фрагмент контента. Ниже приведены несколько примеров использования карточек:

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

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

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

Базовая реализация

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

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

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

См. описание API для Card в справочнике . В нём определены несколько параметров, позволяющих настраивать внешний вид и поведение компонента.

Некоторые ключевые параметры, на которые следует обратить внимание:

  • 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,
        )
    }
}
Card.kt

Эта реализация выглядит следующим образом:

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

Повышенная карта

В следующем фрагменте кода показано, как реализовать расширенную карту. Используйте специальный составной элемент 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,
        )
    }
}
Card.kt

Эта реализация выглядит следующим образом:

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

Контурная карта

Ниже представлен пример контурной карточки. Используйте специальный шаблон 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,
        )
    }
}
Card.kt

Эта реализация выглядит следующим образом:

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

Ограничения

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

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