Составная Card
действует как контейнер Material Design для вашего пользовательского интерфейса. Карты представляют собой единую связную часть контента, например:
- Товар в приложении для покупок.
- Новостной сюжет в новостном приложении.
- Сообщение в коммуникационном приложении.
Акцент на изображении одного фрагмента контента отличает Card
от других контейнеров. Например, Scaffold
обеспечивает общую структуру всего экрана. Карта — это меньший элемент пользовательского интерфейса внутри более крупного макета, тогда как компонент макета, такой как Column
или Row
предоставляет более простой и универсальный API.
В этом разделе показано, как реализовать четыре типа карточек:
Совместимость версий
Для этой реализации требуется, чтобы для minSDK вашего проекта был установлен уровень API 21 или выше.
Зависимости
Создать базовую карту
Card
ведет себя так же, как и другие контейнеры в Compose. Вы объявляете его содержимое, вызывая внутри него другие компонуемые объекты. Например, рассмотрим, как Card
содержит вызов Text
в следующем минимальном примере:
Создать заполненную карту
Ключевым моментом здесь является использование свойства colors
для изменения цвета заливки:
Результаты

Создать повышенную карту
В следующем фрагменте показано, как реализовать карту с повышенными правами. Используйте специальный составной элемент ElevatedCard
.
Свойство elevation
можно использовать для управления внешним видом возвышения и результирующей тени.
Результаты

Создайте контурную карту
Ниже приведен пример контурной карты. Используйте специальный составной элемент OutlinedCard
.
Результаты

Ключевые моменты
См. ссылку на определение API Card
. Он определяет несколько параметров, которые можно использовать для настройки внешнего вида и поведения компонента.
Некоторые ключевые параметры включают в себя:
-
elevation
: добавляет тень к компоненту, благодаря чему он выглядит приподнятым над фоном. -
colors
: использует типCardColors
для установки цвета по умолчанию как для контейнера, так и для всех дочерних элементов. -
enabled
: если вы укажете значениеfalse
для этого параметра, карта будет отображаться как отключенная и не будет реагировать на ввод пользователя. -
onClick
: ОбычноCard
не принимает события щелчка. Таким образом, основная перегрузка, которую вы хотели бы отметить, — это та, которая определяет параметрonClick
. Используйте эту перегрузку, если хотите, чтобы ваша реализацияCard
реагировала на клики пользователя.
Карточки не имеют встроенных действий прокрутки или закрытия, но могут интегрироваться в составные элементы, предлагающие эти функции. Например, чтобы реализовать смахивание для закрытия карты, интегрируйте его с составным элементом SwipeToDismiss
. Для интеграции с прокруткой используйте модификаторы прокрутки, такие verticalScroll
. Дополнительную информацию см. в документации Scroll
.
Коллекции, содержащие это руководство
Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:
