Создайте карточку как контейнер

Составная 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:

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.

Перейти к часто задаваемым вопросам Оставить отзыв