Kart

Card composable, kullanıcı arayüzünüz için bir Materyal Tasarım kapsayıcısı işlevi görür. Kartlar genellikle tek bir tutarlı içerik sunar. Aşağıda, kartları kullanabileceğiniz yerlere bazı örnekler verilmiştir:

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

Card özelliğini diğer kapsayıcılardan ayıran tek bir içerik parçasına yer vermeye odaklanılır. Örneğin, Scaffold tüm ekran için genel bir yapı sağlar. Kart, genellikle daha büyük bir düzen içinde yer alan daha küçük bir kullanıcı arayüzü öğesidir. Column veya Row gibi düzen bileşenleri ise daha basit ve genel bir API sunar.

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ılar gibi davranır. İçeriğini, içindeki diğer composable'ları çağırarak tanımlarsınız. Örneğin, aşağıdaki en küçük örnekte Card öğesinin nasıl Text çağrısı içerdiğini düşünelim:

@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 aşağıda belirtilmiştir:

  • elevation: Bileşene, arka planın üzerinde görünmesini sağlayan bir gölge ekler.
  • colors: Hem container'ı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. Dikkat edilmesi gereken birincil aşırı yük, bir onClick parametresini tanımlayan şeydir. Card uygulamanızın kullanıcının basmalarına 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 de gösterilmektedir.

Doldurulmuş kart

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

Burada önemli olan, doldurulan rengi 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,
        )
    }
}
Card.kt

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

Kart, malzeme temasındaki yüzey varyantı rengiyle doldurulur.
Şekil 2. Doldurulmuş kart örneği.

Yükseltilmiş Kart

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

Yüksekliğin görünümünü ve sonuçta ortaya çıkan gölgeyi 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,
        )
    }
}
Card.kt

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

Bir kart, uygulamanın arka planından yüksekte ve bir gölgeyle gösteriliyor.
Şekil 3. Yükseltilmiş kart örneği.

Dış çizgili Kart

Aşağıda bir dış çizgili kart örneği verilmiştir. Özel OutlinedCard composable'ı 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,
        )
    }
}
Card.kt

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

Kart, ince siyah bir kenarlıkla çevrelenmiş.
Şekil 4. Dış çizgili kart örneği.

Sınırlamalar

Kartlar, yapısı gereği kaydırma veya kapatma işlemleriyle birlikte gelmez ancak bu özellikleri sunan composable'lara entegre edilebilir. Örneğin, bir kartta kaydırarak kapatma özelliğini uygulamak için kartı SwipeToDismiss composable ile entegre edin. Kaydırma ile entegrasyon için verticalScroll gibi kaydırma değiştiricileri kullanın. Daha fazla bilgi için Kaydırma belgelerine göz atın.

Ek kaynaklar