內容參數

簡介

大部分 UI 設計的內容都是靜態的，並且會根據 資料。在本節中，我們將透過內容參數在設計中加入資料， 讓設計人員指定應在設計中的哪些部分填入資料

在 Figma 中新增參數

現在，我們在元件中新增內容參數。

1. 切換至 Fitbit。在 NewsCardTutorial 中，選取「thumbnail image」圖層 hero-item 子類 (在 Mac 上為 ⌘ + 點選，在 Windows 和 Linux 上為 Ctrl + 點選) 圖片)。

2. 在 Relay for Figma 外掛程式中，按一下 +，然後選取 image-content 下拉式選單，將名稱變更為「縮圖」。

   

3. 選取「headline text」圖層，然後按一下「+」並選取 text-content。重複播放 hero-item 中 author 和 date 文字圖層的步驟 變數。分別命名為「headline」、「author」和「date」。

   

4. 按一下外掛程式中的縮圖參數。請注意 元件子類，縮圖圖層是圖片，並且已選取。

   這三個圖層的名稱相同 (即「縮圖」)，而且資料都相同 類型 (image-content) 則代表內容參數已全部連結至 三個變化版本這意味著一個參數會將相同資料提供給多個 子類標題、作者和日期參數也是如此。

   

儲存已命名版本

現在，讓我們將這個版本標示為準備就緒，以便匯入程式碼中。

1. 開啟 Figma Relay 外掛程式 (如果尚未開啟)。

2. 按一下「與開發人員分享」。

3. 在「分享給開發人員」畫面中，輸入版本的名稱和說明。

   標題範例：新增參數

   說明範例：在資訊卡中新增內容參數

4. 按一下 [儲存]。

在 Android Studio 中更新元件

更新 NewsCard 元件：

1. 在 Android Studio 中，確認「Project」工具視窗位於「Android view」。 接著，在 app/ui-packages/news_card/ 上按一下滑鼠右鍵，然後按一下「Update UI」 套件。

   

2. 按一下 圖示來建構專案。這將 使用更新後的 UI 套件，產生可組合函式的更新版本 再也不是件繁重乏味的工作

   

3. 當您查看 app/java (generated)/com/example/hellonews/newscard/NewsCard.kt 時，會發現 我們新增的內容參數 (thumbnail、headline、author、date) 出現在可組合項的參數清單

   // View to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list
   *
   * This composable was generated from the UI package 'news_card'.
   * Generated code; don't edit directly.
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem,
       thumbnail: Painter = EmptyPainter(),
       headline: String = "",
       author: String = "",
       date: String = ""
   ) {
   ...
   

整合至應用程式

我們來看看尚未修改 UI 的應用程式。其中包含 一般新聞報導和語音新聞清單最初 必須新增 NewsCard 元件到：

• PostListArticleStories 可組合函式負責一般新聞 故事
• postTop 參數代表焦點新聞。
• posts 參數代表其餘新聞。
• PostListAudioStories 可組合項會轉譯語音新聞。

  

  現在，我們將 NewsCard 元件整合至主畫面。

1. 在 app/java/com/example/hellonews/ui/home/HomeScreen.kt 中新增以下內容 匯入內容 (位於檔案頂端其他匯入行的旁邊)： 匯入 com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. 同樣在 HomeScreen.kt 中，向下捲動至 PostListArticleStories。

   @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(...)
   ...
   

3. 針對 postTop，請將「Text」元件取代為新匯入的元件 NewsCard，使用 HeroItem 檢視畫面。

   @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,
               view = View.HeroItem
           )
           Spacer(modifier = Modifier.size(12.dp))
           ...
       }
   }
   

4. 將每個 post 的「Text」元件取代為新匯入的「Text」元件 NewsCard，使用 ArticleItem 檢視畫面。

   @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,
                   view = View.ArticleItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

5. 我們還可以對底端的語音新聞進行相同操作。仍在 HomeScreen.kt，向下捲動至約第 260 行的「PostListAudioStories」。

   @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(...)
   ...
   

6. 將每則貼文的「文字」元件替換成新匯入的元件 NewsCard，使用 AudioItem 檢視畫面。

   @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,
                   view = View.AudioItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

7. 按一下 即可再次建構專案，並查看結果 預覽畫面 (分割畫面檢視)：

   

下一步

接下來，我們會在應用程式上新增一些互動。