1. 开始之前
恭喜！在本学习路径中，您学习了如何使用WindowWidthSize类和规范布局使您的应用程序自适应。现在是时候将您学到的知识付诸实践了。
在本练习集中，您将通过创建一个体育应用程序来构建在本学习路径中学到的概念。入门应用程序对于移动布局来说是完全功能齐全的。您的任务是使其适应大屏幕。
解决方案代码在最后提供，但在查看之前请尝试解决练习。按照您舒适的速度完成问题。列出了持续时间，但您不必遵守它们，因为它们只是估计值。建议您花尽可能多的时间仔细解决每个问题。
先决条件
- 完成 Compose 课程中的 Android 基础课程，内容包括构建具有动态导航的自适应应用程序和构建具有自适应布局的自适应应用程序 代码实验室。
您需要什么
- 一台连接互联网并安装了 Android Studio 的计算机
- 访问 GitHub
您将构建什么
一个适应大屏幕的体育应用程序。完成的应用程序如下所示
2. 开始
下载入门代码
在 Android Studio 中，打开basic-android-kotlin-compose-training-sports文件夹。
3. 计划使体育应用程序适应大屏幕
为了使体育应用程序适应大屏幕，您首先需要确定在大屏幕上最好显示应用程序的布局类型。
- 开始查看紧凑屏幕尺寸上可用的当前布局。有两个屏幕——即列表屏幕，对应于
SportsList可组合项，以及详细信息屏幕，对应于SportsDetail可组合项。
|
|
- 查看规范布局以确定最适合体育应用程序用例的布局。
- 草拟一个可能的扩展屏幕布局。使用简单的视觉设计软件或一张纸来可视化屏幕在扩展布局中的组合方式。
4. 在代码中创建扩展屏幕
现在您已经清楚地了解了扩展布局的外观，让我们将其转换为代码。
- 为扩展屏幕创建一个可组合项，该项同时显示列表和详细信息屏幕。您可以将其命名为
SportsListAndDetails并将其放在SportsScreens.kt文件中。 - 创建一个可组合预览，以简化
SportsListAndDetails可组合项的 UI 验证。
- 确保后退按钮行为适合扩展屏幕。当用户按下后退按钮时，您希望他们在出现主屏幕时退出应用程序。您可以通过将适当的 lambda 传递给
SportsDetails可组合项来更改此行为。提示：您可以从(LocalContext.current as Activity)访问应用程序的Activity。
5. 使应用程序根据窗口大小更改不同的布局
要将扩展屏幕可组合项添加到应用程序，请完成以下任务
- 将
androidx.compose.material3:material3-window-size-class添加到应用程序的build.gradle.kts中。 - 在
MainActivity中计算windowSizeClass并将widthSizeClass传递给SportsApp可组合项。 - 创建一个名为
utils的新目录，并创建一个名为WindowStateUtils.kt的新文件。 - 在
WindowStateUtils中添加一个enum类以表示两种不同的contentType。您可以将它们命名为ListOnly和ListAndDetail类型。 - 在
SportsApp可组合项中，根据widthSizeClass确定contentType。 - 当
contentType为ListAndDetail时显示SportsListAndDetails可组合项，当contentType为ListOnly时保持之前的行为。 - 对于
SportsAppBar可组合项，更改其行为，以便在列表页面屏幕扩展时，后退按钮不显示，并且应用程序栏显示 **体育**。 - 使用可调整大小的模拟器验证紧凑屏幕和扩展屏幕的 UI 和导航功能。
6. 获取解决方案代码
要下载完成的代码实验室的代码，您可以使用此 git 命令
$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-sports.git
或者，您可以将存储库下载为 zip 文件，将其解压缩，然后在 Android Studio 中打开它。
如果您想查看解决方案代码，请在 GitHub 上查看。