پارامترهای محتوا

هنگام پیاده سازی، محتوای بیشتر مؤلفه ها ثابت نیست - بسته به داده هایی که به یک مؤلفه ارائه می شود تغییر می کند. برای انعکاس این موضوع در طرح های خود، می توانید از پارامترهای محتوا استفاده کنید. پارامترهای محتوا به شما این امکان را می دهند که بدون کدگذاری سخت داده های واقعی، مشخص کنید که کدام قسمت از طرح حاوی داده است.

یک پارامتر محتوا اضافه کنید

1. در فایل Figma خود، کامپوننت را انتخاب کرده و افزونه Relay for Figma را باز کنید ( Plugins > Relay for Figma ).

   

2. در پنجره اصلی Figma لایه Title را با ⌘ + کلیک بر روی Mac یا Ctrl + کلیک بر روی ویندوز و لینوکس انتخاب کنید. سپس در افزونه، روی + در کنار «Parameters» کلیک کنید و متن-محتوا را انتخاب کنید تا پارامتری برای لایه اضافه کنید.

   

3. برای تغییر نام پارامتر محتوای متن عنوان، آن را در نام وارد کنید. برای این آموزش، عنوان را وارد کنید.

   

   علاوه بر ویرایش نام، می‌توانید انواع مختلف ویژگی را انتخاب کنید، یا توضیحی برای ایجاد نظر در کد اضافه کنید. با توسعه دهندگان خود کار کنید تا مناسب ترین طرح نامگذاری را بیابید. نام پارامترهای محتوا به نام پارامترهای موجود در سازنده ایجاد شده ترجمه می شود.

ذخیره نسخه نامگذاری شده

بیایید اکنون این نسخه را به عنوان آماده برای وارد شدن به کد علامت گذاری کنیم.

1. افزونه Figma Relay را باز کنید، اگر قبلاً باز نشده است.
2. روی اشتراک گذاری با توسعه دهنده کلیک کنید.

3. در صفحه اشتراک‌گذاری با برنامه‌نویس ، یک نام و توضیح برای نسخه وارد کنید.

   عنوان مثال : Hello World Card V3

   توضیح مثال : پارامترهای اضافه شده

کامپوننت را در Android Studio به روز کنید

بیایید کامپوننت را در Android Studio به روز کنیم.

1. در Android Studio، مطمئن شوید که پنجره ابزار Project در نمای Android باشد. سپس روی app/ui-packages/hello_card/ کلیک راست کرده و روی Update UI Package کلیک کنید.

   

2. کلیک کنید تا دوباره پروژه خود را بسازید.

   

   اگر app/java/com/example/hellofigma/hellocard/HelloCard.kt را باز کنید، متوجه خواهید شد که یک پارامتر اضافه شده است: title . نام پارامتر نام پارامتر محتوایی است که در Figma مشخص کردیم:

   

3. app/java/com/example/hellofigma/MainActivity.kt را باز کنید.

4. یک خط را در کلاس MainActivity تغییر دهید تا مقداری به پارامتر title اضافه کنید:

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       HelloCard(title="Balloon World!") // Change this line
                   }
               }
           }
       }
   }
   

5. پایین تر در همان فایل، در پیش نمایش composable، یک خط را تغییر دهید:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard(title="Balloon World!") // Change this line
       }
   }
   

6. دوباره پروژه خود را بسازید و جزء به روز شده را در پیش نمایش ببینید! توجه داشته باشید که مقدار پارامتر جدید اکنون قابل مشاهده است.

   

7. برنامه را اجرا کنید تا همان به روز رسانی ها را در شبیه ساز ببینید.

   هورا! شما اصول اولیه گردش کار Relay را یاد گرفته اید.

مرحله بعدی

این آموزش پایه را به پایان می رساند. در حالی که بسیاری از ویژگی های گردش کار Relay را دیده اید، چندین ویژگی دیگر نیز در دسترس است. اگر به یادگیری نحوه استفاده از ویژگی‌هایی مانند کنترل‌کننده‌های تعامل، کار با مؤلفه‌هایی که چندین گونه Figma دارند و موارد دیگر علاقه دارید، به آموزش پیشرفته بروید!