练习：构建网格

1. 开始之前

恭喜！您已经创建了第一个带有可滚动列表的应用。现在您已准备好将所学知识付诸实践。

本练习侧重于创建构建可滚动列表所需的组件。此材料扩展了您在添加可滚动列表代码实验室中学到的知识，并允许您将这些知识应用于构建可滚动网格。

某些部分可能需要您使用可组合函数或修饰符，这些函数或修饰符您可能以前从未见过。在这种情况下，请查看每个问题的参考资料，您可以在其中找到与您不熟悉的修饰符、属性或可组合函数相关的文档链接。您可以阅读文档并确定如何在应用中整合这些概念。理解文档的能力是您应该培养的重要技能，以便不断学习。

解决方案代码在最后提供，但请尝试在查看答案之前解决练习。将解决方案视为实现应用的一种方式。

先决条件

完成添加可滚动列表代码实验室中的 Android Compose 基础课程。

您需要什么

安装了 Android Studio 且可以上网的计算机。

资源

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

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

您将构建什么

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

练习问题分为几个部分，您将在其中构建

课程主题数据类

主题数据将包含图像、名称以及该主题中关联的课程数量。

一个可组合函数，用于表示课程主题网格项目

每个主题项目将显示图像、名称、关联的课程数量以及一个装饰性图标。

一个可组合函数，用于显示这些课程主题项目的网格。

最终应用将如下所示

2. 开始

使用空活动模板和最低 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. 主题网格项目

创建一个可组合函数来表示主题网格项目。

最终屏幕截图

完成实现后，您的主题项目布局应与下面的屏幕截图匹配

UI 规范

使用以下 UI 规范

文本样式

提示：哪个可组合函数可以垂直排列其子元素，哪个可以水平排列其子元素？

参考资料

6. 课程网格

创建主题网格项目后，就可以用它来制作课程主题的网格。

在本练习中，您将使用网格项目可组合函数制作一个有两列的网格。

最终屏幕截图

完成实现后，您的设计应与下面的屏幕截图匹配

UI 规范

使用以下 UI 规范

参考资料

7. 获取解决方案代码

要下载完成的代码实验室的代码，您可以使用以下 git 命令

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

或者，您可以将存储库下载为 zip 文件，解压缩它，然后在 Android Studio 中打开它。

如果要查看解决方案代码，请在 GitHub 上查看。

您在本练习中构建的应用是 Owl 应用课程屏幕的修改版。Owl 应用是一个综合性示例应用，展示了 Compose 的功能。可以在compose-samples GitHub 存储库中找到其他 Compose 示例应用。