Alt Öğe Parametreleri

Herhangi bir Figma çerçeve, grup veya bileşen katmanı, alt öğelerinin dinamik olduğunu belirtmek için bir içerik parametresiyle ek açıklama ekleyebilir. Bu, container bileşenleri tasarlamak veya tasarımda uygulama kodu tarafından özel bileşenlerin yerleştirilebileceği alanlar oluşturmak için kullanılabilir.

Bir çerçeveye veya gruba alt parametre eklemek için Figma'daki katmanı seçin, "Parametreler"in yanındaki + düğmesini tıklayın, ardından menüden children'yi seçin.

Figma'daki alt parametre

Kullanıcı Arayüzü Paketi Android Studio'ya aktarıldıktan sonra, parametre oluşturulan @Composable işlev imzasında @Composable RelayContainerScope.() -> Unit türünde (bu örnekte customGraphic olarak adlandırılır) görünür.

@Composable
fun HelloCardWithCustomChild(
    modifier: Modifier = Modifier,
    customGraphic: @Composable RelayContainerScope.() -> Unit
) {
    TopLevel(modifier = modifier) {
        Image()
        CustomGraphic { customGraphic() }
        Title()
    }
}

@Preview işlevinde, alanı doldurmak için Figma dosyasındaki tasarım kullanılır (bu örnekte customGraphic parametresi ayarlanır).

Figma'daki alt öğe önizlemede korundu
@Preview(widthDp = 248, heightDp = 265)
@Composable
private fun HelloCardWithCustomChildPreview() {
    MaterialTheme {
        HelloCardWithCustomChild(
            customGraphic = {
                RelayText(
                    content = "Label",
                    fontSize = 16.0.sp,
                    fontFamily = montserrat,
                    color = Color(
                       alpha = 255,
                       red = 0,
                       green = 0,
                       blue = 0
                    ),
                    textAlign = TextAlign.Left,
                    fontWeight = FontWeight(500.0.toInt())
                )
                RelayImage(
                    image = painterResource(
                       R.drawable.hello_card_with_custom_child_custom_graphic_still
                    ),
                    contentScale = ContentScale.Crop,
                    modifier =
                       Modifier.requiredWidth(132.0.dp).requiredHeight(48.0.dp)
                )
            }
        )
    }
}

Bir katmana alt öğe parametresi eklemek, katmanı aşağıdaki şekillerde de etkiler:

  • Daha önce katmana eklenen Relay parametreleri, Relay for Figma eklentisi kullanıcı arayüzünde görünmez ve oluşturulan kodda kullanılamaz.
  • Oluşturulan kodda, katmanın içeriği artık varsayılan olarak oluşturulmaz. Bu, yalnızca önizlemede karşılık gelen composable'ın içeriği haline gelir. composable'ın herhangi bir içeriğe sahip olması için geliştiricinin alt öğe parametresine içerik aktaracak bir kod yazması gerekir.