内容参数

简介

使用更多参数更新 NewsCard

大多数界面设计的内容不是静态的,而是会根据数据而变化。在此部分中,我们将通过内容参数向设计中添加数据,设计人员可以利用这些内容参数指定设计的哪个部分应该填充数据

在 Figma 中添加参数

我们来向组件中添加内容参数。

  1. 切换到 Figma。在 NewsCardTutorial 的 hero-item variant 中,选择 thumbnail image 层(对于 Mac 系统,请按住 ⌘,同时点击图片;对于 Windows 系统和 Linux 系统,请按住 Ctrl,同时点击图片)。
  2. 在 Relay for Figma 插件中,点击 + 并从下拉菜单中选择 image-content,然后将名称更改为“thumbnail”。

    添加了“thumbnail”参数的 Figma 插件
  3. 选择 headline text 层,点击 +,然后选择 text-content。对 hero-item 变体中的 authordate 文本层,重复上述步骤。分别将这些层命名为“headline”“author”和“date”。

    添加了“headline”“author”和“date”参数的 Figma 插件
  4. 点击插件中的 thumbnail 参数。请注意,在每个组件变体中,thumbnail 层都是图片,并且处于选中状态。

    由于这三个层具有相同的名称(“thumbnail”)且数据类型相同 (image-content),因此在全部三个变体中都关联了此内容参数。这意味着,一个参数会向多个变体提供相同的数据。对于 headline、author 和 date 参数,也是如此。

    已选择全部三个 thumbnail 层的 Figma 插件

保存已命名的版本

现在,将此版本标记为准备就绪,以便导入代码中。

  1. 打开 Figma Relay 插件(如果尚未打开)。

  2. 点击与开发者分享

  3. 与开发者分享屏幕中,输入版本的名称和说明。

    标题示例:添加的参数

    说明示例:向卡片中添加了内容参数

  4. 点击 Save

在 Android Studio 中更新组件

下面,我们更新 NewsCard 组件:

  1. 在 Android Studio 中,确保“Project”工具窗口处于 Android view 中。 然后右键点击 app/ui-packages/news_card/,接着点击 Update UI Package

    上下文菜单中的“Update UI Package”选项
  2. 点击 “Make Project”按钮 以构建您的项目。这样将获取更新后的界面软件包,并生成更新后的可组合代码版本。

    工具栏中的“Build”按钮
  3. 如果您查看 app/java (generated)/com/example/hellonews/newscard/NewsCard.kt,就会看到我们添加的内容参数(thumbnailheadlineauthordate)显示在我们的可组合项的参数列表中。

    // 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 = ""
    ) {
    ...
    

集成到应用中

再来看看我们的应用,我们尚未修改其界面。其中包含常规新闻报道列表和音频新闻报道列表。我们需要将 NewsCard 组件添加到这两个可组合项中:

  • PostListArticleStories 可组合项负责呈现常规新闻报道。
  • postTop 参数表示头条新闻报道。
  • posts 参数表示其余新闻报道。
  • PostListAudioStories 可组合项负责呈现音频新闻报道。
    包含三个部分的应用界面
    现在,我们将 NewsCard 组件集成到主屏幕中。
  1. app/java/com/example/hellonews/ui/home/HomeScreen.kt 中,在文件顶部附近其他导入行旁边添加以下导入内容:import 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,使用 HeroItem 视图将 Text 组件替换为我们新导入的 NewsCard

    @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,使用 ArticleItem 视图将 Text 组件替换为新导入的 NewsCard

    @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. 对于每个 post,使用 AudioItem 视图将 Text 组件替换为新导入的 NewsCard

    @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. 点击 “Make Project”按钮 以再次构建您的项目,并在预览(分屏视图)中查看结果:

    NewsApp 预览

下一步

接下来,我们将向应用中添加一些交互功能