内容参数

简介

使用更多参数更新 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 变体中的 author 和 date 文本层，重复上述步骤。分别将这些层命名为“headline”“author”和“date”。

    添加了“headline”“author”和“date”参数的 Figma 插件

  4. 点击插件中的 thumbnail 参数。请注意，在每个组件变体中，thumbnail 层都是图片，并且处于选中状态。

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

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

保存已命名的版本

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

  1. 打开 Figma Relay 插件（如果尚未打开）。

  2. 点击与开发者分享。

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

    标题示例：添加的参数

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

  4. 点击保存。

在 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，就会看到我们添加的内容参数（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 = ""
) {
...

集成到应用中

再来看看我们的应用，我们尚未修改其界面。其中包含常规新闻报道列表和音频新闻报道列表。我们需要将 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 预览

下一步

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