資訊卡
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
「資訊卡」元件包含與單一主題相關的內容和動作。
圖解
資訊卡元件只有一個版位。資訊卡可以包含圖示、圖片或標籤，也能自訂內容。
資訊卡預設為圓角矩形，並有漸層背景。將資訊卡高度上限設為 60%，確保資訊卡能完整顯示在畫面上，因為圓形螢幕最多可覆蓋 20% 的螢幕頂端與底部。
標題資訊卡
您可以使用片頭字幕在應用程式中顯示資訊，例如訊息。片頭字幕的版面有三個版位版面配置，其中包含標題、選填的時間欄位以及相關內容 (圖片或文字)。
應用程式資訊卡
使用應用程式資訊卡顯示來自多個應用程式的互動元素。應用程式資訊卡有五個版位版面配置，其中包含應用程式圖示、應用程式名稱、活動發生時間、某種類型的標題以及相關內容 (圖片或文字)。
資訊卡漸層
資訊卡漸層
頂端/左側 + 左側 68dp 的邊框間距 = 100% 表面
底部/右側 = 0% 表面
圖片資訊卡重疊廣告
上方/左側 + 56 dp 邊框間距 (從 T/L 算起 = 100% 表面)
下/右 + 24 dp 邊框間距 (B/R 為 0%)
(圖片背景上的漸層疊加層)
大小
資訊卡寬度
資訊卡預設為容器的寬度上限。
資訊卡高度
您可以調整資訊卡高度。這取決於元件的內容。
在圓形錶面上，系統會裁剪高度高於螢幕高度 60% 的資訊卡。
使用方式
自動調整式版面配置
片頭字幕
在大螢幕上，我們允許在內文中額外加入一行文字。如要顯示更多圖片，請在底部加入放大的 24 dp 邊框間距。
含有內嵌圖片的 TitleCard (取代內文文案版位)
在大螢幕上，圖片不會變更其顯示比例，且右邊會加上邊框間距，以免資訊卡高度過大。
可自訂的資訊卡
含有圖片背景的資訊卡
您必須自訂項目，才能達到這個版面配置。
圖片資訊卡會顯示與單一主題相關的內容，並有背景圖片。圖片資訊卡也可以顯示獨立圖片。
建議您將底部邊框間距調高為 24 dp，這樣在不疊加文字的情況下，顯示更多背景圖片。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[null,null,["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],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"]]
