练习：构建网格

1. 准备工作

恭喜！您构建了第一个具有可滚动列表的应用。现在是时候将所学知识付诸实践了。

本练习的重点是如何创建构建可滚动列表所需的组件。本材料扩展了您在添加可滚动列表 Codelab 中学到的知识，并可让您运用这些知识来构建可滚动网格。

某些部分或许需要您使用以前可能没见过的可组合项或修饰符。在这种情况下，请参阅每个问题对应的参考文档，您可以在其中找到与您不熟悉的修饰符、属性或可组合项相关的文档的链接。您可以阅读相关文档，并确定如何将概念整合到应用中。理解文档是一项重要技能，您应该培养这项技能以增长知识。

解决方案代码就在文末，不过建议您先做练习，然后再看答案。不妨将提供的解决方案视为实现应用的方法之一。

前提条件

通过“添加可滚动列表”Codelab 完成“Android 之 Compose 开发基础”课程作业。

所需条件

一台可连接到互联网并安装了 Android Studio 的计算机。

资源

您需要以下资源才能完成这些练习题的代码

主题图片。这些图片表示列表中的每个主题。
ic_grain.xml。这是主题中的课程数量旁边显示的装饰图标。

构建内容

在这些练习题中，您将从头开始构建 Courses 应用。Courses 应用会显示课程主题列表。

练习题会分为几个部分，您需要在其中构建：

课程主题数据类：

主题数据将包含图片、名称和主题中相关课程的数量。

用于表示课程主题网格项的可组合项：

每个主题项都会显示图片、名称、相关课程数量以及装饰图标。

用于显示这些课程主题项网格的可组合项。

最终的应用将如下所示：

2. 开始

使用 Empty Activity 模板创建一个新项目，并将最低 SDK 设为 24。

3. 主题数据类

在本部分中，您将构建一个类，用于存储每个课程主题的数据。

看一下最终应用中的项。

每个课程主题都包含三项具有唯一性的信息。以每个项的唯一内容为参考，创建一个类来保存这些数据。

4. 数据源

在本部分中，您将为课程网格创建一个数据集。

将以下项复制到 app/src/main/res/values/strings.xml 中：

<string name="architecture">Architecture</string>
<string name="crafts">Crafts</string>
<string name="business">Business</string>
<string name="culinary">Culinary</string>
<string name="design">Design</string>
<string name="fashion">Fashion</string>
<string name="film">Film</string>
<string name="gaming">Gaming</string>
<string name="drawing">Drawing</string>
<string name="lifestyle">Lifestyle</string>
<string name="music">Music</string>
<string name="painting">Painting</string>
<string name="photography">Photography</string>
<string name="tech">Tech</string>

创建一个名为 DataSource.kt 的空文件。将以下代码复制到此文件中：

object DataSource {
    val topics = listOf(
        Topic(R.string.architecture, 58, R.drawable.architecture),
        Topic(R.string.crafts, 121, R.drawable.crafts),
        Topic(R.string.business, 78, R.drawable.business),
        Topic(R.string.culinary, 118, R.drawable.culinary),
        Topic(R.string.design, 423, R.drawable.design),
        Topic(R.string.fashion, 92, R.drawable.fashion),
        Topic(R.string.film, 165, R.drawable.film),
        Topic(R.string.gaming, 164, R.drawable.gaming),
        Topic(R.string.drawing, 326, R.drawable.drawing),
        Topic(R.string.lifestyle, 305, R.drawable.lifestyle),
        Topic(R.string.music, 212, R.drawable.music),
        Topic(R.string.painting, 172, R.drawable.painting),
        Topic(R.string.photography, 321, R.drawable.photography),
        Topic(R.string.tech, 118, R.drawable.tech)
    )
}

5. 主题网格项

创建用于表示主题网格项的可组合项。

最终屏幕截图

最终实现后，您的主题项布局应与以下屏幕截图一致：

界面规范

请使用以下界面规范：

文本样式设置

提示：哪个可组合项会垂直排列其子项，哪个可组合项会水平排列其子项？

参考文档

6. 课程网格

创建主题网格项后，即可将其用于制作课程主题网格。

在本练习中，您将使用网格项可组合项来制作一个包含两列的网格。

最终屏幕截图

最终实现后，您的设计应与以下屏幕截图一致：

界面规范

请使用以下界面规范：

参考文档

7. 获取解决方案代码

如需下载完成后的 Codelab 代码，您可以使用以下 Git 命令：

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-courses.git

或者，您也可以下载 ZIP 文件形式的代码库，将其解压缩并在 Android Studio 中打开。

如果您想查看解决方案代码，请前往 GitHub 查看。

您在此练习中构建的应用是 Owl 应用课程屏幕的修改版本。Owl 应用是一个全面的示例应用，演示了 Compose 的各项功能。其他 Compose 示例应用可在 compose-samples GitHub 代码库中找到。