Составная 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:
Отображать интерактивные компоненты
