Открытки
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Компонент «Карточка» содержит контент и действия по одному предмету.
Анатомия

Компонент карты имеет только один слот. Карты могут содержать значки, изображения или метки, их можно настраивать.
По умолчанию карточки имеют прямоугольную форму с закругленными углами и градиентным фоном. Установите максимальную высоту вашей карты на 60 %, чтобы она полностью отображалась на экране, поскольку круглые дисплеи могут обрезать до 20 % верхней и нижней части экрана.


Титульная карточка
Используйте карточки заголовков для отображения информации в приложении, например сообщения. Карточки заголовков имеют макет с тремя слотами, который включает заголовок, дополнительное поле времени и соответствующий контент, который представляет собой изображение или текст.
Карта приложения
Используйте карточки приложений для отображения интерактивных элементов из нескольких приложений. Карты приложений имеют макет с пятью слотами, который включает значок приложения, имя приложения, время, когда произошло действие, какой-либо заголовок и соответствующий контент, который представляет собой изображение или текст.
Градиент карт

Градиент карты
Сверху/слева + отступ 68 dp слева = 100 % поверхности.
Внизу/Справа = 0% поверхности

Наложение карты изображения
Сверху/слева + отступы 56 dp от T/L = 100% поверхности
Внизу/Справа + отступ 24 dp от B/R = 0% поверхности
(Наложение градиента на фон изображения)
Размеры

Ширина карты
По умолчанию карты имеют максимальную ширину контейнера.
Высота карты Высота карты является гибкой. Это определяется содержанием компонентов.
На круглых циферблатах карты, высота которых превышает 60 % высоты экрана, обрезаются.
Применение

Адаптивные макеты

НазваниеКарта
На больших экранах мы допускаем дополнительную строку текста для основного текста. А чтобы отобразить большую часть изображения, добавьте увеличенное отступы размером 24 dp внизу.

TitleCard со встроенным изображением (заменяет слот для основной копии)
На больших экранах изображение не меняет соотношение сторон и имеет отступ справа, чтобы не делать высоту карты слишком большой.

Карты с дополнительной кастомизацией
Открытка с фоновым изображением

Для достижения этого макета вам потребуется настройка.
Карты изображений отображают контент, относящийся к одной теме, с фоновым изображением. Карты изображений также могут отображать отдельные изображения.
Рекомендуется увеличить нижний отступ до 24 dp, чтобы отобразить большую часть фонового изображения без текста над ним.

Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-07-29 UTC.
[null,null,["Последнее обновление: 2025-07-29 UTC."],[],[],null,["# Cards\n\nThe [Card](/reference/kotlin/androidx/wear/compose/material/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component contains content and actions about a single subject.\n\nAnatomy\n-------\n\nA card component only has a single slot. Cards can contain icons, images or labels, are customizable.\n\nBy default, cards are rectangular with rounded corners and a gradient background. Set the maximum height of your card to 60% to ensure that it's fully displayed on the screen because circular displays can clip up to 20% of the top and bottom of the screen.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Title Card**\n\nUse [Title cards](/reference/kotlin/androidx/wear/compose/material/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show information within an application, such as a message. Title cards have a three-slot layout which includes a title, an optional time field, and the relevant content, which is either an image or text. \n**App Card**\n\nUse [App cards](/reference/kotlin/androidx/wear/compose/material/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show interactive elements from multiple applications. App cards have a five-slot layout that includes an application icon, the application name, the time that the activity occurred, a title of some sort and the relevant content, which is either an image or text.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCards gradient\n--------------\n\n**Card Gradient**\n\nTop/Left + 68dp padding from Left = 100% Surface \n\nBottom/Right = 0% Surface\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Card Overlay**\n\nTop/Left + 56 dp padding from T/L = 100% Surface \n\nBottom/Right + 24 dp padding from B/R = 0% Surface \n\n(Gradient overlays on a image background)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\n**Card width**\n\nCards default to the maximum width of the container.\n\n\u003cbr /\u003e\n\n**Card height**\n\n\u003cbr /\u003e\n\nCard height is flexible. It is determined by the components' content.\n\nOn round watch faces, cards that are taller than 60% of the height of the screens are clipped.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\n**TitleCard**\n\nOn larger screens we allow an extra line of text for body copy. And in order to display more of the image, add an enlarged 24 dp padding at the bottom.\n\n**TitleCard with in-line image (replacing the body copy slot)**\n\nOn larger screens, the image doesn't change its aspect ratio and has the padding on the right in order to not make the height of the card too big.\n\n### Cards with additional customization\n\n**Card with an image background** \nIn order to achieve this layout you will need customization. \n\n\nImage cards display content relating to a single topic with a background image. Image cards can also display standalone images. \n\n\nIt is recommended that the bottom padding is increased to 24 dp in order to display more of the background image without text over it.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]