این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

کنترل کننده های تعامل را به طرح ها اضافه کنید

در این بخش، یاد می گیریم که چگونه از طریق کنترلرهای تعاملی، تعاملات را به طراحی خود اضافه کنیم.

کنترل‌کننده‌های تعامل راهی برای تعیین محل تعامل با یک مؤلفه (ضربه زدن، دو بار ضربه زدن و غیره) فراهم می‌کنند. کنترل کننده های تعاملی را می توان به هر لایه داخل یک طرح اضافه کرد.

کنترل کننده ها را اضافه کنید

کنترل کننده های تعامل را می توان به هر لایه اضافه کرد. این به طراحان اجازه می دهد تا مشخص کنند کدام بخش از مؤلفه تعاملی است.

نوع hero-item (فریم) را انتخاب کنید، روی + در کنار پارامتر کلیک کنید و tap-handler را انتخاب کنید تا یک کنترل کننده تعامل اضافه شود. این به توسعه دهندگان اجازه می دهد تا کدی بنویسند که به ضربه زدن کاربر روی کارت واکنش نشان می دهد.
مرحله قبل را با لایه نماد منو در نوع آیتم صوتی تکرار کنید. این به توسعه دهندگان اجازه می دهد تا زمانی که کاربر روی نماد منو ضربه می زند، یک منو را نمایش دهند.
اگر کنترل کننده روی منو ضربه خورده را انتخاب کنید، متوجه خواهید شد که فقط برای نوع مورد صوتی اعمال می شود، زیرا سایر انواع نماد منو ندارند. با این حال، روی NewsCard ضربه زده شده برای هر سه نوع اعمال می شود. این به این معنی است که شما می توانید یک کنترلر (در کد) برای اجرا در هنگام ضربه زدن به هر یک از سه نوع ارائه دهید و تکرار کد و پارامترها را حذف کنید. نحوه عملکرد آن را با جزئیات بیشتر در بخش Update در بخش Android Studio خواهیم دید.

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

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

افزونه Figma Relay را باز کنید، اگر قبلاً باز نشده است.
روی اشتراک گذاری با توسعه دهنده در گوشه سمت راست پایین کادر گفتگو کلیک کنید.
در صفحه اشتراک‌گذاری با برنامه‌نویس ، یک نام و توضیح برای نسخه وارد کنید.
عنوان مثال : تعاملات اضافه شده
توضیح مثال : دو کنترل کننده تعامل به کارت ها اضافه شده است
روی ذخیره کلیک کنید.
CMD-L را در MAC، CTRL-L را در ویندوز فشار دهید تا پیوند مؤلفه را در کلیپ بورد کپی کنید.

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

بیایید اکنون مؤلفه NewsCard را به روز کنیم:

در اندروید استودیو، مطمئن شوید که پنجره ابزار Project در نمای اندروید باشد. سپس روی app/ui-packages/news_card/ کلیک راست کرده و در نزدیکی پایین منوی زمینه، روی Update UI Package کلیک کنید.
کلیک کنید برای ساخت پروژه خود این بسته UI به روز شده را می گیرد و یک نسخه به روز از کد قابل ترکیب ایجاد می کند.
توجه: این منجر به هشدارهای ساخت در HomeScreen.kt می شود، زیرا از پارامترهای جدید در NewsCard استفاده نمی کند. این مورد انتظار است.

به app/java/com/example/hellonews/newscard/NewsCard.kt نگاه کنید و ببینید که کنترل‌کننده‌های تعامل به عنوان پارامتر به NewsCard اضافه شده‌اند ( onNewsCardTapped ، onMenuTapped ).

// Design to select for NewsCard
enum class View {
  HeroItem, ArticleItem, AudioItem
}

/**
*   Displays a summary of a news article.
*
*   This composable was generated from the UI package 'news_card'.
*   Generated code; do not edit directly
*/
@Composable
fun NewsCard(
  modifier: Modifier = Modifier,
  view: View = View.HeroItem,
  thumbnail: Painter = EmptyPainter(),
  headline: String = "",
  author: String = "",
  date: String = "",
  onNewsCardTapped: () -> Unit = {},
  onMenuTapped: () -> Unit = {}
) {
...

ادغام در برنامه

حالا اجازه دهید چند کنترل کننده به تعاملات خود اضافه کنیم.

در app/java/com/example/hellonews/ui/home/HomeScreen.kt ، به سمت PostListArticleStories ، در اطراف خط 175 بروید.

...
@Composable
fun HomeScreen(...)

@Composable
private fun PostList(...)

@Composable
private fun PostListArticleStoriesSection(...)

@Composable
private fun SearchArticlesSection(...)

@Composable
private fun PostListArticleStories(
  postTop: Post,
  posts: List<Post>,
  createOnTapped: (String, String) -> () -> Unit
) {...}

@Composable
private fun AudioStoriesTitle(...)

@Composable
private fun PostListAudioStories(...)

@Composable
fun Dialog(...)
...

برای postTop ، کنترل کننده‌هایی را برای onNewsCardTapped اضافه کنید. createOnTapped یک گفتگو با پارامترهای آن به عنوان عنوان و بدنه باز می کند.

@Composable
private fun PostListArticleStories(
  postTop: Post,
  posts: List<Post>,
  createOnTapped: (String, String) -> () -> Unit
) {
  ...
  Column(
      horizontalAlignment = Alignment.Start,
      modifier = ...
  ) {
      Spacer(modifier = Modifier.size(12.dp))
      NewsCard(
          thumbnail = painterResource(postTop.imageId),
          headline = postTop.title,
          author = postTop.metadata.author.name,
          date = postTop.metadata.date,
          onNewsCardTapped = createOnTapped("Card Tapped", postTop.title),
          view = View.HeroItem
      )
      Spacer(modifier = Modifier.size(12.dp))
      ...
  }
}

برای هر پست، کنترل‌کننده‌هایی را برای onNewsCardTapped اضافه کنید.

@Composable
private fun PostListArticleStories(
  postTop: Post,
  posts: List<Post>,
  createOnTapped: (String, String) -> () -> Unit
) {
  ...
  Column(
      horizontalAlignment = Alignment.Start,
      modifier = ...
  ) {
      ...

      posts.forEach { post ->
          NewsCard(
              thumbnail = painterResource(post.imageId),
              headline = post.title,
              author = post.metadata.author.name,
              date = post.metadata.date,
              onNewsCardTapped = createOnTapped("Card Tapped", post.title),
              view = View.ArticleItem
          )
          Spacer(modifier = Modifier.size(12.dp))
      }
  }
}

هنوز در HomeScreen.kt ، به PostListAudioStories ، در اطراف خط 260 بروید.

...
@Composable
fun HomeScreen(...)

@Composable
private fun PostList(...)

@Composable
private fun PostListArticleStoriesSection(...)

@Composable
private fun SearchArticlesSection(...)

@Composable
private fun PostListArticleStories(...)

@Composable
private fun AudioStoriesTitle(...)

@Composable
private fun PostListAudioStories(
  posts: List<Post>,
  createOnTapped: (String, String) -> () -> Unit
) {...}

@Composable
fun Dialog(...)
...

برای هر پست، کنترل‌کننده‌هایی را برای onNewsCardTapped اضافه کنید. از آنجایی که نوع Audio دارای یک منو است، createOnTapped به onMenuTapped اختصاص دهید.

@Composable
private fun PostListAudioStories(
  posts: List<Post>,
  createOnTapped: (String, String) -> () -> Unit
) {
  Column(
      horizontalAlignment = ...,
      modifier = ...
  ) {
      posts.forEach { post ->
          NewsCard(
              thumbnail = painterResource(post.imageId),
              headline = post.title,
              author = post.metadata.author.name,
              date = post.metadata.date,
              onNewsCardTapped = createOnTapped("Card Tapped", post.title),
              onMenuTapped = createOnTapped("Menu Tapped", post.title),
              view = View.AudioItem
          )
          Spacer(modifier = Modifier.size(12.dp))
      }
  }
}

برای ساختن برنامه و اجرای آن در شبیه ساز، روی ▶ کلیک کنید.
هورا! شما با ویژگی های پیشرفته Relay آشنا شده اید.

می توانید در مورد نحوه کار با Relay در بخش Relay Workflow اطلاعات بیشتری کسب کنید. همچنین مایلیم اگر بازخوردی دارید از شما بشنویم.

{% کلمه به کلمه %} {% آخر کلمه %}

برای شما توصیه می شود

توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
پارامترهای محتوا
انواع طراحی هندلینگ

{% کلمه به کلمه %} {% آخر کلمه %}