簡介
![使用更多參數更新 NewsCard](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?authuser=0000&hl=zh-tw)
大部分 UI 設計的內容都是靜態的,並且會根據 資料。在本節中,我們將透過內容參數在設計中加入資料, 讓設計人員指定應在設計中的哪些部分填入資料
在 Figma 中新增參數
現在,我們在元件中新增內容參數。
- 切換至 Fitbit。在 NewsCardTutorial 中,選取「thumbnail image」圖層 hero-item 子類 (在 Mac 上為 ⌘ + 點選,在 Windows 和 Linux 上為 Ctrl + 點選) 圖片)。
在 Relay for Figma 外掛程式中,按一下 +,然後選取
image-content
下拉式選單,將名稱變更為「縮圖」。選取「headline text」圖層,然後按一下「+」並選取
text-content
。重複播放 hero-item 中 author 和 date 文字圖層的步驟 變數。分別命名為「headline」、「author」和「date」。按一下外掛程式中的縮圖參數。請注意 元件子類,縮圖圖層是圖片,並且已選取。
這三個圖層的名稱相同 (即「縮圖」),而且資料都相同 類型 (image-content) 則代表內容參數已全部連結至 三個變化版本這意味著一個參數會將相同資料提供給多個 子類標題、作者和日期參數也是如此。
儲存已命名版本
現在,讓我們將這個版本標示為準備就緒,以便匯入程式碼中。
開啟 Figma Relay 外掛程式 (如果尚未開啟)。
按一下「與開發人員分享」。
在「分享給開發人員」畫面中,輸入版本的名稱和說明。
標題範例:新增參數
說明範例:在資訊卡中新增內容參數
按一下 [儲存]。
在 Android Studio 中更新元件
更新 NewsCard 元件:
在 Android Studio 中,確認「Project」工具視窗位於「Android view」。 接著,在
app/ui-packages/news_card/
上按一下滑鼠右鍵,然後按一下「Update UI」 套件。按一下
圖示來建構專案。這將 使用更新後的 UI 套件,產生可組合函式的更新版本 再也不是件繁重乏味的工作
當您查看
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 可組合項會轉譯語音新聞。
在
app/java/com/example/hellonews/ui/home/HomeScreen.kt
中新增以下內容 匯入內容 (位於檔案頂端其他匯入行的旁邊): 匯入com.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
同樣在 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(...) ...
針對 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)) ... } }
將每個 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)) } } }
我們還可以對底端的語音新聞進行相同操作。仍在
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(...) ...
將每則貼文的「文字」元件替換成新匯入的元件 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)) } } }
按一下
即可再次建構專案,並查看結果 預覽畫面 (分割畫面檢視):
下一步
接下來,我們會在應用程式上新增一些互動。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 在設計中加入互動處理常式
- 處理設計變化版本
- 在 Android Studio 中將設計轉換為程式碼