Карта

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

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

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

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

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

Card работает так же, как и другие контейнеры в Compose. Его контент задается путем вызова других функций, поддерживающих композицию. Например, в следующем минимальном примере функция 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,
        )
    }
}

Вот как это будет выглядеть:

Цвет карточки соответствует варианту цвета поверхности из темы Material.
Рисунок 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,
        )
    }
}

Вот как это будет выглядеть:

Карточка приподнята над фоном приложения и отбрасывает тень.
Рисунок 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,
        )
    }
}

Вот как это будет выглядеть:

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

Ограничения

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

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