Карта

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

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

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

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

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

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

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

Примечание: По умолчанию Card помещает свое содержимое в компонуемую Column , размещая каждый элемент внутри карточки один под другим.

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

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

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

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

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

Бета-версия: Перегрузка Card , определяющая параметр onClick , является экспериментальной.

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

Ниже приведен пример того, как можно реализовать заполненную карточку.

Ключевым моментом здесь является использование свойства 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 composable.

Свойство 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 . Дополнительную информацию см. в документации по прокрутке .

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

• Документация по материальному пользовательскому интерфейсу