内容参数

简介

Updating the NewsCard with more parameters

大多数 UI 设计的内容不是静态的——它们会根据数据而变化。在本节中，我们将通过内容参数向设计添加数据，这使设计人员能够指定设计中的哪一部分应该填充数据

在 Figma 中添加参数

让我们将内容参数添加到我们的组件中。

切换到 Figma。在 NewsCardTutorial 中，选择 hero-item 变体中的 缩略图图像层（在 Mac 上按 ⌘ + 点击，或在 Windows 和 Linux 上按 Ctrl + 点击图像）。
在 Relay for Figma 插件中，点击 + 并从下拉菜单中选择 image-content，然后将名称更改为“thumbnail”。
选择标题文本图层，点击 + 并选择 text-content。在英雄项目变体中，对作者和日期文本图层重复相同的步骤。分别将它们命名为“标题”、“作者”和“日期”。
点击插件中的缩略图参数。注意，在每个组件变体中，缩略图图层都是一个图像，并且被选中。

因为三个图层具有相同的名称（“缩略图”）并且是相同的数据类型（图像内容），所以内容参数已在所有三个变体中连接到它。这意味着一个参数将相同的数据提供给多个变体。标题、作者和日期参数也是如此。

保存命名版本

现在让我们将此版本标记为准备导入到代码中。

打开 Figma Relay 插件（如果尚未打开）。
点击与开发人员共享。
在与开发人员共享屏幕中，为版本输入名称和描述。

示例标题：添加参数

示例描述：向卡片添加内容参数
点击保存。

更新 Android Studio 中的组件

让我们更新NewsCard组件

在 Android Studio 中，确保项目工具窗口处于Android 视图中。然后右键点击 app/ui-packages/news_card/，然后点击更新 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 可组合组件渲染音频新闻报道。

现在让我们将NewsCard组件集成到主屏幕中。

在 app/java/com/example/hellonews/ui/home/HomeScreen.kt 中，将以下导入添加到文件顶部附近的其他导入行旁边：导入 com.example.hellonews.newscard.NewsCard

导入 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，使用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))
        ...
    }
}

对于每个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))
        }
    }
}

我们可以对底部的音频报道执行相同的操作。仍然在 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(...)
...

对于每个 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))
        }
    }
}

点击再次构建项目，并在预览中查看结果（分屏视图）。

下一步

接下来，我们将向应用程序添加一些交互。

内容参数

简介

在 Figma 中添加参数

保存命名版本

更新 Android Studio 中的组件

集成到应用程序中

下一步

推荐给你