打卡Android学习—Compose 布局 和 修饰符

我们将通过解释 布局 和 修饰符 的基础知识 来开始我们的旅程。我们将介绍他们是如何协同工作的，Compose 提供了什么开箱即用的API，以及如何漂亮地设计您的UI

布局——因为 Compose 中的几乎所有内容都是布局

布局是Compose UI的核心组件，使您能够使用提供的各种现成API制作令人惊叹的app，并构建自己的自定义解决方案。在Compose中，您使用可组合函数来发出UI部分，但布局指定了这些元素的 精确排列和对齐。

因此，无论您使用 Compose 预置的布局还是构建您自己的自定义布局，布局都是 Compose世界的重要组成部分。 您可以将它们视为 Compose 协调器 — 指示嵌套在其中的其他可组合项的结构。 事实上，我们将在本系列的后面看到，几乎 Compose UI 中的一切都是布局！ 但我们稍后会谈到这一点。

修饰符——把它们链接在一起！

现在，如果您以前使用过 Compose（如果您用过的话，对您来说是 （盲猜是技能已get的意思）！），您一定已经注意到修饰符对这个框架的重要性和关键性。 它们允许您装饰和扩充可组合项，按照您需要的方式塑造它们，并使它们能够执行您需要它们执行的操作。 通过链接你想要的任意数量的修饰符，您可以：

• 更改可组合项的大小，布局，行为 和 外观
• 添加 附加信息，如辅助功能标签
• 处理 用户输入
• 使其 可点击，可滚动，可拖动，或 可缩放

现在我们已经介绍了布局和修饰符的要点，让我们看看它们的实际应用！

更多Android学习资料 请点击免费领取

开始游戏

让我们卷起袖子，构建一个有趣的游戏画面，以了解布局和修饰符如何协同工作。 我们将从使用这两艘 Android Alien 飞船开始，逐步构建游戏的完整屏幕截图：

所以我们需要两艘飞船！可重复使用的 AndroidAlien 可组合项如下所示：

/* Copyright 2023 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 */

@Composable
fun AndroidAlien(
    color: Color,
    modifier: Modifier = Modifier,
) {
   
    Image(
        modifier = modifier,
        painter = painterResource(R.drawable.android_alien),
        colorFilter = ColorFilter.tint(color = color),
        contentDescription = null
    )
}
复制代码

然后，调用此可组合项两次，我们将一个绿色和一个红色外星人添加到父级 AndroidAliens 中：

/* Copyright 2023 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 */

@Composable
fun AndroidAliens() {
    AndroidAlien(
        color = Color.Red,
        modifier = Modifier
            .size(70.dp)
            .padding(4.dp)
     )
    AndroidAlien(
        color = Color.Green,
        modifier = Modifier
            .size(70.dp)
            .padding(4.dp)
    )
}
复制代码

在构建像这样的简单可组合项时，这里有两件关于修饰符用法的事儿要解释：

1. 在第一个代码段中，我们根据 Compose API 最佳实践，设置了一个带有默认参数的 modifier 参数
2. 在第二个片段中，我们传递了一个由两个非常常见的修饰符组成的修饰符链来设置图像的大小 和 内边距
   仅阅读最后一个代码示例，我们可能希望（并期望）Compose 以特定顺序放置这些子可组合项。 然而，当我们运行它时，我们只会在屏幕上看到一个元素：

一个落单的，孤独的 Android Alien

那艘红色飞船似乎不见了。为了调试这个问题，让我们增加红色飞船的大小：

/* Copyright 2023 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 */

@Composable
fun AndroidAliens() {
   
    AndroidAlien(
        color = Color.Red,
        modifier = Modifier.size(100.dp)
    )
    // …
}

红飞船似乎有点害羞，躲在绿飞船后面。 这意味着，这两个可组合项实际上是相互重叠的，因为它们缺少关于如何布局的具体说明。 Compose 可以做很多事情，但它无法读懂你的想法！ 这告诉我们，我们的飞船需要一些结构和编队，而这正是 Compose 布局所做的事情。

垂直和水平布局元素

我们不希望我们的外星飞船彼此完全重叠，而是希望它们被布置成一个挨着一个——这是一般 Android apps UI 元素的一个非常常见的用例。 我们希望我们的飞船只能够并排放置，以及一个在另一个之上：
为此，Compose 提供了 Column 和 Row 布局可组合项，分别用于垂直和水平布局元素。

让我们首先将我们的两个 AlienShips 移动到一个 Row 中，以水平排列它们：

/* Copyright 2023 Google LLC. 
   SPDX-License-Identifier: Apache-2.0 */

@Composable
fun AndroidAliensRow(