Kartlar
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Kart bileşeni, tek bir konuyla ilgili içerikler ve işlemler içerir.
Anatomi
Kart bileşeninde yalnızca tek bir yuva vardır. Kartlar simge, resim veya etiket içerebilir ve özelleştirilebilir.
Varsayılan olarak, kartlar yuvarlatılmış köşeleri ve kademeli arka planı olan dikdörtgenlerdir. Dairesel görüntüler ekranın üst ve alt kısmından% 20'ye varan oranda kırpılabilir. Bu nedenle, kartınızın ekranda tamamen görünmesi için kartınızın maksimum yüksekliğini% 60'a ayarlayın.
Başlık Kartı
Uygulamalardaki bilgileri (ör. mesaj) göstermek için Başlık kartlarını kullanın. Başlık kartları; başlık, isteğe bağlı bir zaman alanı ve ilgili içerik (resim veya metin) içeren üç alanlı bir düzene sahiptir.
Uygulama Kartı
Birden fazla uygulamadaki etkileşimli öğeleri göstermek için uygulama kartlarını kullanın. Uygulama kartlarında; uygulama simgesi, uygulama adı, etkinliğin gerçekleşme zamanı, bir tür başlık ve ilgili içerik (resim veya metin) içeren beş alanlı bir düzen bulunur.
Kartlar gradyanı
Kart Gradyanı
Soldan Üst/Sol + 68 dp dolgu =% 100 Yüzey
Alt/Sağ =% 0 Yüzey
Resim Kartı Yer Paylaşımı
T/L'den Üst/Sol + 56 dp dolgu =% 100 Yüzey
Alt/Sağ + 24 dp dolgu (B/R'den% 0 Yüzey)
(Resim arka planında gradyan yer paylaşımları)
Boyutlar
Kart genişliği
Kartlar varsayılan olarak kapsayıcının maksimum genişliğine ayarlanır.
Kart yüksekliği
Kart yüksekliği esnek. Bileşenlerin içeriğine göre belirlenir.
Yuvarlak saat kadranlarında, ekran yüksekliğinin% 60'ından daha uzun olan kartlar kırpılır.
Kullanım
Uyarlanabilir düzenler
Başlık Kartı
Büyük ekranlarda, gövde metni için fazladan bir metin satırına izin verilir. Resmin daha fazla kısmını göstermek için de alt kısma 24 dp boyutunda büyütülmüş bir dolgu ekleyin.
Satır içi resimli Başlık Kartı (gövde metni yuvasının yerine)
Büyük ekranlarda, resmin en boy oranı değişmez ve kartın yüksekliğini çok fazla artırmamak için dolgu sağdadır.
Ek özelleştirme içeren kartlar
Arka planı resimli kart
Bu düzeni sağlamak için özelleştirmeye ihtiyacınız var.
Resim kartları, arka plan resmiyle birlikte tek bir konuyla ilgili içerikleri gösterir. Resim kartlarında bağımsız resimler de gösterilebilir.
Arka plan resminin üzerinde metin olmadan daha fazla alan göstermek için alt dolgunun 24 dp'ye yükseltilmesi önerilir.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[null,null,["Son güncelleme tarihi: 2025-07-27 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"]]
