דף זה תורגם על ידי Cloud Translation API.

הוספת רכיבי handler של אינטראקציות לעיצובים

בחלק הזה נלמד איך להוסיף אינטראקציות לעיצוב שלנו דרך גורמים שמטפלים באינטראקציות.

רכיבי handler של אינטראקציות מספקים דרך לציין היכן רכיב יכול להיות הייתה אינטראקציה עם (הקשה, הקשה כפולה וכו'). ניתן להוסיף רכיבי handler של אינטראקציות לכל שכבה בתוך עיצוב.

הוספת handlers

ניתן להוסיף רכיבי handler של אינטראקציות לכל שכבה. כך מעצבים יכולים לציין אילו חלקים של הרכיב הם אינטראקטיביים.

בוחרים את הווריאציה של הפריט המנצח (המסגרת), לוחצים על + לצד פרמטר ובוחרים באפשרות tap-handler כדי להוסיף handler של אינטראקציה. הזה מאפשרת למפתחים לכתוב קוד שמגיב כשמשתמש מקיש על הכרטיס.
חוזרים על השלב הקודם עם שכבת הסמל menu בקטע audio-item. הווריאנט. ההגדרה הזו מאפשרת למפתחים להציג תפריט כשמשתמש מקיש על התפריט .
אם תבחרו ב-handler בהקשה על התפריט, תוכלו לראות שהוא רק רלוונטי לווריאנט אודיו-פריט, כי לווריאציות האחרות אין סמל תפריט. עם זאת, הכרטיס ב-NewsCard שעליו מקישים חל על כל שלושת הסוגים וריאציות של אותו מודל. כלומר, אפשר לספק handler אחד (בקוד) שירוץ מקישים על אחת משלוש הווריאנטים, ומסירים כפילות של קוד . נראה את זה בפירוט בעדכון הבא של Android Studio.

שמירת גרסה בעלת שם

עכשיו נסמן את הגרסה הזו כמוכנה לייבוא אל הקוד.

פותחים את הפלאגין של Figma Relay, אם הוא עדיין לא פתוח.
לוחצים על 'שיתוף עם המפתח' בפינה השמאלית התחתונה של תיבת הדו-שיח.
במסך 'שיתוף עם המפתח', מזינים שם ותיאור של .

כותרת לדוגמה: אינטראקציות שנוספו

דוגמה לתיאור: שני רכיבי handler של אינטראקציות שנוספו לכרטיסים
לוחצים על שמירה.
מקישים על CMD-L ב-MAC או על CTRL-L ב-Windows כדי להעתיק את הקישור לרכיב אל הלוח.

עדכון הרכיב ב-Android Studio

עכשיו נעדכן את הרכיב NewsCard:

ב-Android Studio, מוודאים שהחלון של הכלי 'פרויקט' נמצא בתצוגת Android. לאחר מכן לוחצים לחיצה ימנית על app/ui-packages/news_card/, וקרוב לחלק התחתון של בתפריט ההקשר, לוחצים על Update UI Package.
לוחצים על כדי לבנות את הפרויקט. זה לוקח את החבילה המעודכנת של ממשק המשתמש יוצרת גרסה מעודכנת של הקוד הקומפוזבילי.

הערה: בכרטיסייה הזו יופיעו אזהרות לגבי build ב-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 = {}
) {
...

שילוב באפליקציה

עכשיו נוסיף כמה handlers לאינטראקציות שלנו.

ב-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, צריך להוסיף handlers של 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))
      ...
  }
}

לכל פוסט, צריך להוסיף handlers של 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(...)
...

לכל פוסט, צריך להוסיף handlers של onNewsCardTapped. כי הווריאנט של האודיו יש תפריט, יש להקצות את 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))
      }
  }
}

לוחצים על ► כדי ליצור את האפליקציה ולהפעיל אותה באמולטור.

הידד! למדת את התכונות המתקדמות של שרת הממסר.

אפשר לקרוא מידע נוסף על עבודה עם שרת ממסר בתהליך העבודה של שרת הממסר. . נשמח גם לשמוע ממך אם יש לך משוב.

מומלץ עבורך

הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
פרמטרים של תוכן
טיפול בווריאציות של עיצוב