Kart

Card composable'ı, kullanıcı arayüzünüz için Materyal Tasarım kapsayıcısı görevi görür. Kartlar genellikle tek bir tutarlı içerik parçası sunar. Aşağıdaki örneklerde, kart kullanabileceğiniz yerler gösterilmektedir:

  • Alışveriş uygulamasındaki bir ürün.
  • Haber uygulamasındaki bir haber.
  • İletişim uygulamasındaki bir mesaj.

Card, tek bir içeriği göstermeye odaklanmasıyla diğer kapsayıcılardan ayrılır. Örneğin, Scaffold tüm ekranın genel yapısını sağlar. Kart, genellikle daha büyük bir düzen içindeki daha küçük bir kullanıcı arayüzü öğesidir. Column veya Row gibi bir düzen bileşeni ise daha basit ve daha genel bir API sağlar.

Metin ve simgelerle doldurulmuş yükseltilmiş bir kart.
Şekil 1. Metin ve simgelerle doldurulmuş bir kart örneği.

Temel uygulama

Card, Compose'daki diğer kapsayıcılara benzer şekilde davranır. İçeriğini, içindeki diğer composable'ları çağırarak bildirirsiniz. Örneğin, aşağıdaki basit örnekte Card işlevinin Text işlevine nasıl çağrı içerdiğini inceleyin:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Gelişmiş uygulamalar

Card API tanımı için referansa bakın. Bileşenin görünümünü ve davranışını özelleştirmenize olanak tanıyan çeşitli parametreler tanımlar.

Dikkat edilmesi gereken bazı önemli parametreler şunlardır:

  • elevation: Bileşene gölge ekleyerek arka planın üzerinde yükseltilmiş gibi görünmesini sağlar.
  • colors: Hem kapsayıcının hem de alt öğelerin varsayılan rengini ayarlamak için CardColors türünü kullanır.
  • enabled: Bu parametre için false değerini iletirseniz kart devre dışı olarak görünür ve kullanıcı girişine yanıt vermez.
  • onClick: Normalde Card, tıklama etkinliklerini kabul etmez. Bu nedenle, dikkat etmeniz gereken birincil aşırı yükleme, onClick parametresini tanımlayan aşırı yüklemedir. Card uygulamanızın kullanıcının basma işlemlerine yanıt vermesini istiyorsanız bu aşırı yüklemeyi kullanmanız gerekir.

Aşağıdaki örnekte, bu parametrelerin yanı sıra shape ve modifier gibi diğer yaygın parametreleri nasıl kullanabileceğiniz gösterilmektedir.

Dolgulu kart

Aşağıda, doldurulmuş bir kartı nasıl uygulayabileceğinize dair bir örnek verilmiştir.

Buradaki kilit nokta, dolgu rengini değiştirmek için colors özelliğinin kullanılmasıdır.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}

Bu uygulama aşağıdaki gibi görünür:

Kart, Materyal Teması Oluşturma'daki yüzey varyantı rengiyle doldurulur.
Şekil 2. Doldurulmuş kart örneği.

Yüksek Kart

Aşağıdaki snippet'te, yükseltilmiş kartın nasıl uygulanacağı gösterilmektedir. Özel ElevatedCard composable'ını kullanın.

Yüksekliğin ve gölgenin görünümünü kontrol etmek için elevation özelliğini kullanabilirsiniz.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}

Bu uygulama aşağıdaki gibi görünür:

Kart, uygulamanın arka planının üzerinde yükseltilmiş ve gölgelendirilmiştir.
Şekil 3. Yükseltilmiş kart örneği.

Dış Çizgili Kart

Aşağıda, ana hatları belirgin bir kart örneği verilmiştir. Özel OutlinedCard composable'ını kullanın.

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}

Bu uygulama aşağıdaki gibi görünür:

Kartın etrafında ince siyah bir kenarlık var.
Şekil 4. Ana hatları belirgin kart örneği.

Sınırlamalar

Kartlar, kaydırma veya kapatma işlemleriyle birlikte gelmez ancak bu özellikleri sunan bileşenlere entegre edilebilir. Örneğin, bir kartta kaydırarak kapatma özelliğini uygulamak için kartı SwipeToDismiss composable ile entegre edin. Kaydırma ile entegre etmek için verticalScroll gibi kaydırma değiştiricileri kullanın. Daha fazla bilgi için Scroll belgelerine bakın.

Ek kaynaklar