Карта

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

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