هر قاب، گروه یا لایه ی Figma را می توان با یک پارامتر محتوا حاشیه نویسی کرد تا نشان دهد که فرزندان آن پویا هستند. این می تواند برای طراحی اجزای کانتینر یا ایجاد شکاف هایی در طراحی استفاده شود که در آن اجزای سفارشی می توانند توسط کد برنامه تزریق شوند.
برای افزودن یک پارامتر فرزند به یک فریم یا گروه، لایه را در Figma انتخاب کنید و روی دکمه + در کنار "Parameters" کلیک کنید، سپس children
از منو انتخاب کنید.
هنگامی که بسته UI به Android Studio وارد شد، پارامتر در امضای تابع @Composable
با نوع @Composable RelayContainerScope.() -> Unit
(در این مورد، با نام customGraphic
) ظاهر می شود.
@Composable
fun HelloCardWithCustomChild(
modifier: Modifier = Modifier,
customGraphic: @Composable RelayContainerScope.() -> Unit
) {
TopLevel(modifier = modifier) {
Image()
CustomGraphic { customGraphic() }
Title()
}
}
در تابع @Preview
، طراحی از فایل Figma برای پر کردن شکاف استفاده میشود (در این حالت، پارامتر customGraphic
تنظیم میشود).
@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)
)
}
)
}
}
افزودن پارامتر فرزند به یک لایه نیز به روش های زیر بر لایه تأثیر می گذارد:
- هر پارامتر Relay که قبلاً به لایه اضافه شده است در رابط کاربری افزونه Relay for Figma قابل مشاهده نیست و در کد تولید شده موجود نیست .
- در کد تولید شده، محتوای لایه دیگر به صورت پیش فرض ارائه نمی شود. فقط در پیشنمایش به محتوای مربوطه قابل ترکیب تبدیل میشود. برای اینکه composable هر محتوایی داشته باشد، توسعهدهنده باید کدی بنویسد تا محتوا را به پارامتر فرزند منتقل کند.
برای شما توصیه می شود
- توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
- اصول چیدمان را بنویسید
- پارامترها را اضافه کنید
- پیش نمایش رابط کاربری خود را با پیش نمایش های Composable مشاهده کنید