Карта

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

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

It is the focus on portraying a single piece of content that distinguishes Card from other containers. For example, Scaffold provides general structure to a whole screen. Card is generally a smaller UI element inside a larger layout, whereas a layout component such as Column or Row provides a simpler and more generic API.

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

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

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

Карта повышенного уровня

Следующий фрагмент кода демонстрирует, как реализовать приподнятую карточку. Используйте специальный компонент 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

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

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

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

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

Ограничения

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

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

• Документация Material UI