使用文本组合构建简单的应用

1. 开始之前

在本 Codelab 中，您将使用 Jetpack Compose 构建一个简单的 Android 应用，该应用在屏幕上显示生日消息。

先决条件

  • 如何在 Android Studio 中创建应用。
  • 如何在模拟器或 Android 设备上运行应用。

您将学到什么

  • 如何编写可组合函数，例如 Text、Column 和 Row 可组合函数。
  • 如何在应用的布局中显示文本。
  • 如何格式化文本，例如更改文本大小。

您将构建什么

  • 一个 Android 应用，以文本格式显示生日祝福，完成后看起来像此屏幕截图

2ff181d48325023c.png

您需要什么

  • 安装了 Android Studio 的计算机

2. 设置“生日快乐”应用

在此任务中，您将在 Android Studio 中使用“空活动”模板设置一个项目，并将文本消息更改为个性化的生日祝福。

创建“空活动”项目

  1. 在“欢迎使用 Android Studio”对话框中，选择“新建项目”。
  2. 在“新建项目”对话框中，选择“空活动”，然后点击“下一步”。
  3. 在“名称”字段中输入 Happy Birthday，然后在“最低 SDK”字段中选择最低 API 级别 24（牛轧糖），然后点击“完成”。

b17b607847b0d0ab.png

  1. 等待 Android Studio 创建项目文件并构建项目。
  2. 点击 fd26b2e3c2870c3.png 运行“app”。

应用应如下面的屏幕截图所示

d8299bfc1a82cd57.png

使用“空活动”模板创建此“生日快乐”应用时，Android Studio 会为基本 Android 应用设置资源，包括屏幕上的“Hello Android！”消息。在本 Codelab 中，您将了解此消息是如何显示的，如何将其文本更改为生日祝福，以及如何添加和格式化其他消息。

什么是用户界面 (UI)？

应用的用户界面 (UI) 是您在屏幕上看到的内容：文本、图像、按钮和许多其他类型的元素，以及它们在屏幕上的布局方式。它是应用向用户显示内容的方式，以及用户与应用交互的方式。

此图像包含一个可点击的按钮、文本消息和文本输入字段，用户可以在其中输入数据。

9a2df39af4122803.png

可点击按钮

50a9b402fd9037c0.png

卡片内的文本消息

17794ea52cfb5473.png

文本输入字段

这些元素中的每一个都称为 UI 组件。您在应用屏幕上看到的几乎所有内容都是 UI 元素（也称为 UI 组件）。它们可以是交互式的，例如可点击按钮或可编辑输入字段，也可以是装饰性图像。

在以下应用中，尝试找到尽可能多的 UI 组件。

showing recommended apps

在本 Codelab 中，您将使用一个显示文本的 UI 元素，称为 Text 元素。

3. 什么是 Jetpack Compose？

Jetpack Compose 是一个用于构建 Android UI 的现代工具包。Compose 通过更少的代码、强大的工具和直观的 Kotlin 功能简化和加速 Android 上的 UI 开发。使用 Compose，您可以通过定义一组函数（称为可组合函数）来构建 UI，这些函数接收数据并描述 UI 元素。

可组合函数

可组合函数是 Compose 中 UI 的基本构建块。可组合函数

  • 描述 UI 的某些部分。
  • 不返回任何内容。
  • 接收一些输入并生成屏幕上显示的内容。

注解

注解是将额外信息附加到代码的一种方式。此信息可以帮助 Jetpack Compose 编译器等工具以及其他开发人员了解应用的代码。

通过在要注释的声明开头使用 @ 字符前缀其名称（注解）来应用注解。不同的代码元素（包括属性、函数和类）都可以被注释。在本课程的后面，您将学习有关类的更多信息。

下图是带注解函数的示例

Diagram showing anatomy of a composable function where prefix character @ annotation is composable followed by the function declaration.

以下代码片段包含带注解属性的示例。您将在即将到来的 Codelab 中使用这些属性。

// Example code, do not copy it over

@Json
val imgSrcUrl: String

@Volatile
private var INSTANCE: AppDatabase? = null

带参数的注解

注解可以带参数。参数为处理它们的工具提供额外信息。以下是带参数和不带参数的 @Preview 注解的一些示例。

Android studio screenshot showing code and preview

不带参数的注解

Android studio screenshot showing code and preview

预览背景的注解

Android studio screenshot showing code and preview

带预览标题的注解

您可以向注解传递多个参数，如下所示。

895f8d3a229c287a.png

显示代码和预览的 Android Studio 屏幕截图

带预览标题和系统 UI（手机屏幕）的注解

Jetpack Compose 包含大量内置注解，您在本课程中已经看到了 @Composable 和 @Preview 注解。您将在本课程的后半部分学习更多注解及其用法。

可组合函数示例

可组合函数使用 @Composable 注解进行注释。所有可组合函数都必须具有此注解。此注解通知 Compose 编译器此函数旨在将数据转换为 UI。提醒一下，编译器是一个特殊的程序，它接收您编写的代码，逐行查看并将其转换为计算机可以理解的内容（机器语言）。

此代码片段是一个简单可组合函数的示例，它传递数据（name 函数参数）并使用它在屏幕上呈现文本元素。

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

关于可组合函数的一些说明

  • Jetpack Compose 建立在可组合函数的基础上。这些函数使您可以通过描述 UI 应如何显示来以编程方式定义应用的 UI，而不是专注于 UI 构造过程。要创建可组合函数，只需将 @Composable 注解添加到函数名称即可。
  • 可组合函数可以接受参数，这使应用逻辑可以描述或修改 UI。在这种情况下，您的 UI 元素接受一个 String，以便它可以使用姓名向用户问好。

注意代码中的可组合函数

  1. 在 Android Studio 中，打开 MainActivity.kt 文件。
  2. 滚动到 GreetingPreview() 函数。此可组合函数有助于预览 Greeting() 函数。作为一种良好的实践，函数应始终被命名或重命名以描述其功能。将此函数的名称更改为 BirthdayCardPreview()。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

可组合函数可以调用其他可组合函数。在此代码片段中，预览函数正在调用 Greeting() 可组合函数。

请注意，前面的函数还有另一个注解，一个 @Preview 注解，在 @Composable 注解之前带有一个参数。您将在本课程的后面学习有关传递给 @Preview 注解的参数的更多信息。

可组合函数名称

返回空值并带有 @Composable 注解的 Compose 函数**必须**使用帕斯卡命名法命名。帕斯卡命名法是指一种命名约定，其中复合词中每个单词的首字母都大写。帕斯卡命名法和骆驼命名法之间的区别在于，帕斯卡命名法中的所有单词都大写。在骆驼命名法中，第一个单词可以是大写或小写。

Compose 函数

  • **必须**是名词：DoneButton()
  • **不能**是动词或动词短语：DrawTextField()
  • **不能**是名词化的介词：TextFieldWithLink()
  • **不能**是形容词：Bright()
  • **不能**是副词：Outside()
  • 名词**可以**以描述性形容词为前缀：RoundIcon()

要了解更多信息，请参阅 命名可组合函数。

示例代码。请勿复制

// Do: This function is a descriptive PascalCased noun as a visual UI element
@Composable
fun FancyButton(text: String) {}


// Do: This function is a descriptive PascalCased noun as a non-visual element
// with presence in the composition
@Composable
fun BackButtonHandler() {}


// Don't: This function is a noun but is not PascalCased!
@Composable
fun fancyButton(text: String) {}


// Don't: This function is PascalCased but is not a noun!
@Composable
fun RenderFancyButton(text: String) {}


// Don't: This function is neither PascalCased nor a noun!
@Composable
fun drawProfileImage(image: ImageAsset) {}

4. Android Studio 中的设计窗格

Android Studio 允许您在 IDE 中预览可组合函数，而无需将应用安装到 Android 设备或模拟器上。正如您在前面的路径中了解到的那样，您可以在 Android Studio 的“设计”窗格中预览应用的外观。

2bb27291fa8c8ecc.png

可组合函数必须为任何参数提供默认值才能进行预览。因此，建议不要直接预览 Greeting() 函数。相反，您需要添加另一个函数（在本例中为 BirthdayCardPreview() 函数），该函数使用适当的参数调用 Greeting() 函数。

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

要查看预览

  1. 在 BirthdayCardPreview() 函数中，将 Greeting() 函数中的 "Android" 参数更改为您的姓名。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("James")
    }
}
  1. 预览应自动更新。

您应该会看到更新的预览。

907e7542c84daf9f.png

5. 添加新的文本元素

在此任务中，您将删除 Hello $name! 问候语并添加生日问候语。

添加新的可组合函数

  1. 在 MainActivity.kt 文件中，删除 Greeting() 函数定义。您将在 Codelab 后面的代码中添加您自己的函数来显示问候语。

删除以下代码

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}
  1. 在 onCreate() 函数内部，请注意 Greeting() 函数调用现在显示为红色。此红色表示错误。将光标悬停在此函数调用上，Android Studio 将显示有关错误的信息。

9634619e59248532.png

  1. 从 onCreate() 和 BirthdayCardPreview() 函数中删除 Greeting() 函数调用及其参数。您的 MainActivity.kt 文件将如下所示

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
    }
}
  1. 在 BirthdayCardPreview() 函数之前，添加一个名为 GreetingText() 的新函数。不要忘记在函数之前添加 @Composable 注解，因为这将是一个描述 Text 可组合项的 Compose 函数。
@Composable
fun GreetingText() {
}
  1. 最佳实践是让你的可组合项接受一个 Modifier 参数，并将该 modifier 传递给它的第一个子元素。你将在后续的任务和代码实验室中了解有关 Modifier 和子元素的更多信息。现在，在 GreetingText() 函数中添加一个 Modifier 参数。
@Composable
fun GreetingText(modifier: Modifier = Modifier) {
}
  1. 在 GreetingText() 可组合函数中添加一个类型为 String 的 message 参数。
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
}
  1. 在 GreetingText() 函数中，添加一个 Text 可组合项，并将文本消息作为命名参数传入。
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message
    )
}

此 GreetingText() 函数在 UI 中显示文本。它通过调用 Text() 可组合函数来实现。

预览函数

在此任务中，你将在**设计**窗格中预览 GreetingText() 函数。

  1. 在 BirthdayCardPreview() 函数内部调用 GreetingText() 函数。
  2. 将一个 String 参数传递给 GreetingText() 函数，即你朋友的生日问候语。如果愿意，你可以使用他们的姓名进行自定义，例如 "Happy Birthday Sam!"。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Sam!")
    }
}
  1. **设计**窗格会自动更新。预览你的更改。

334688e2e89fb19e.png

6. 更改字体大小

你已将文本添加到用户界面，但它看起来还不像最终的应用程序。在此任务中，你将学习如何更改大小、文本颜色以及影响文本元素外观的其他属性。你还可以尝试不同的字体大小和颜色。

可缩放像素

可缩放像素 (SP) 是字体大小的度量单位。Android 应用程序中的 UI 元素使用两种不同的测量单位：密度无关像素 (DP) （稍后用于布局）和可缩放像素 (SP)。默认情况下，SP 单位与 DP 单位大小相同，但它会根据用户在手机设置中首选的文本大小进行调整。

  1. 在 MainActivity.kt 文件中，滚动到 GreetingText() 函数中的 Text() 可组合项。
  2. 将 fontSize 参数作为第二个命名参数传递给 Text() 函数，并将其设置为 100.sp 的值。
Text(
    text = message,
    fontSize = 100.sp
)

Android Studio 会突出显示 .sp 代码，因为你需要导入一些类或属性才能编译你的应用程序。

ba6c753d4eefd1d5.png

  1. 点击 Android Studio 突出显示的 .sp。
  2. 在弹出窗口中点击**导入**以导入**androidx.compose.ui.unit.sp** 以使用 .sp 扩展属性。
  1. 滚动到文件顶部并注意 import 语句，你应该会看到一个 import androidx.compose.ui.unit.sp 语句，这意味着 Android Studio 将该包添加到你的文件中。

e073e9d3465e080c.png

  1. 注意字体大小的更新预览。消息重叠的原因是需要指定行高。

3bf48548c10f4ea.png

  1. 更新 Text 可组合项以包含行高。
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message,
        fontSize = 100.sp,
        lineHeight = 116.sp,
    )
}

ef457e9b19d4d495.png

现在你可以尝试不同的字体大小。

7. 添加另一个文本元素

在你之前的任务中，你向你的朋友添加了一条生日问候语。在此任务中，你将用你的名字签名卡片。

  1. 在 MainActivity.kt 文件中，滚动到 GreetingText() 函数。
  2. 将一个类型为 String 的 from 参数传递给函数，用于你的签名。
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier)
  1. 在生日消息 Text 可组合项之后，添加另一个 Text 可组合项，该可组合项接受一个设置为 from 值的 text 参数。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Text(
        // ...
    )
    Text(
        text = from
    )
}
  1. 添加一个设置为 36.sp 值的 fontSize 命名参数。
Text(
    text = from,
    fontSize = 36.sp
)
  1. 滚动到 BirthdayCardPreview() 函数。
  2. 添加另一个 String 参数来签署你的卡片，例如 "From Emma"。
GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
  1. 注意预览。

8d148222c669dcad.png

一个可组合函数可能描述多个 UI 元素。但是，如果你不提供有关如何排列它们的指导，Compose 可能会以你不喜欢的方式排列这些元素。例如，前面的代码生成了两个相互重叠的文本元素，因为没有关于如何排列这两个可组合项的指导。

在你的下一个任务中，你将学习如何在一行和一列中排列可组合项。

8. 在一行和一列中排列文本元素

UI 层次结构

UI 层次结构基于包含，这意味着一个组件可以包含一个或多个组件，有时会使用父级和子级这两个术语。这里的上下文是父 UI 元素包含子 UI 元素，而子 UI 元素又可以包含子 UI 元素。在本节中，你将学习有关 Column、Row 和 Box 可组合项的信息，它们可以充当父 UI 元素。

9270b7e10f954dcb.png

Compose 中三个基本的标准布局元素是 Column、Row 和 Box 可组合项。你将在下一个代码实验室中了解有关 Box 可组合项的更多信息。

column showing three elements arranged vertically and a row showing three elements arranged horizontally

Column、Row 和 Box 是可组合函数，它们将可组合内容作为参数，因此你可以在这些布局元素内部放置项目。例如，Row 可组合项内部的每个子元素都水平放置在一行中。

// Don't copy.
Row {
    Text("First Column")
    Text("Second Column")
}

这些文本元素在屏幕上并排显示，如下图所示。

蓝色边框仅用于演示目的，不会显示。

7117f9998760a828.png

尾随 lambda 语法

请注意，在前面的代码片段中，在 Row 可组合函数中使用了花括号而不是圆括号。这称为尾随 lambda 语法。你将在课程的后面详细了解lambda 和尾随 lambda 语法。现在，熟悉这种常用的 Compose 语法。

Kotlin 提供了一种特殊的语法，用于将函数作为参数传递给函数，当最后一个参数是函数时。

function parameter is the last parameter

当你将函数作为该参数传递时，可以使用尾随 lambda 语法。无需将函数放在圆括号内，而是可以将其放在圆括号外的花括号中。这是 Compose 中推荐的做法，也是常见的做法，因此你需要熟悉代码的外观。

例如，Row() 可组合函数中的最后一个参数是 content 参数，这是一个描述子 UI 元素的函数。假设你想要创建一个包含三个文本元素的行。此代码可以工作，但使用命名参数传递尾随 lambda 非常繁琐

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

因为 content 参数是函数签名中的最后一个参数，并且你将其值作为 lambda 表达式传递（现在，如果你不知道 lambda 是什么，没关系，只需熟悉语法），你可以删除 content 参数和圆括号，如下所示

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

在一行中排列文本元素

在此任务中，你将在一行中排列应用程序中的文本元素以避免重叠。

  1. 在 MainActivity.kt 文件中，滚动到 GreetingText() 函数。
  2. 在文本元素周围添加 Row 可组合项，以便它显示包含两个文本元素的行。选择两个 Text 可组合项，点击灯泡。选择**用小部件包围** > **用 Row 包围**。

7ca98d82742d60b9.png

94f248eb6f802b93.png

现在函数应如下面的代码片段所示

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Row {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}
  1. Android Studio 会为你自动导入 Row 函数。滚动到顶部并注意导入部分。应已添加 import androidx.compose.foundation.layout.Row。
  2. 在**设计**窗格中观察更新后的预览。暂时将生日消息的字体大小更改为 30.sp。

Birthday greeting and signature are displayed next to each other in a row.

现在预览看起来好多了，因为没有重叠。但是，这不是你想要的，因为你的签名空间不够。在你的下一个任务中，你将文本元素排列成一列来解决此问题。

将文本元素排列成一列

在这个任务中，轮到你修改 GreetingText() 函数以将文本元素排列成一列。预览应该如下面的截图所示

d80295e73578e75d.png

既然你已经尝试自己动手做了，不妨将你的代码与这段代码片段中的解决方案代码进行对比。

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

注意 Android Studio 自动导入的包

import androidx.compose.foundation.layout.Column

回想一下，你需要将修饰符参数传递给可组合函数中的子元素。这意味着你需要将修饰符参数传递给 Column 可组合函数。

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

9. 向应用添加问候语

一旦你对预览满意，就可以将可组合函数添加到你的设备或模拟器上的应用中。

  1. 在 MainActivity.kt 文件中，滚动到 onCreate() 函数。
  2. 从 Surface 块中调用 GreetingText() 函数。
  3. 传递 GreetingText() 函数、你的生日祝福和签名。

完成后的 onCreate() 函数应该如下面的代码片段所示

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
                }
            }
        }
    }
}
  1. 在模拟器上构建并运行你的应用。

59e9c0c6e19748ff.png

将问候语对齐到中心

  1. 要将问候语对齐到屏幕中心，请添加一个名为 verticalArrangement 的参数，并将其设置为 Arrangement.Center。你将在以后的 Codelab 中学习更多关于 verticalArrangement 的知识。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        // ...
    }
}
  1. 在列周围添加 8.dp 内边距。最佳实践是使用 4.dp 的增量作为内边距值。
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier.padding(8.dp)
    ) {
        // ...
    }
}
  1. 为了进一步美化你的应用，使用 textAlign 将问候语文本对齐到中心。
Text(
    text = message,
    fontSize = 100.sp,
    lineHeight = 116.sp,
    textAlign = TextAlign.Center
)

28c8e62f86323ba4.png

在上图中，只有问候语由于 textAlign 参数而居中对齐。签名“From Emma”使用默认的对齐方式，即左对齐。

  1. 为签名添加内边距并将其对齐到右侧。
Text(
    text = from,
    fontSize = 36.sp,
    modifier = Modifier
        .padding(16.dp)
        .align(alignment = Alignment.End)
)

82b858f2f79ca9c4.png

采用良好的实践

最佳实践是将修饰符属性与来自父可组合函数的修饰符一起传递。按如下方式更新 GreetingText() 中的修饰符参数

onCreate()

Surface(
    //...
) {
    GreetingText(
        message = "Happy Birthday Sam!",
        from = "From Emma",
        modifier = Modifier.padding(8.dp)
    )
}

GreetingText()

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        // ...
    }
}

在模拟器上构建并运行你的应用以查看最终结果。

2ff181d48325023c.png

10. 获取解决方案代码

完成后的 MainActivity.kt

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(
                        message = "Happy Birthday Sam!",
                        from = "From Emma",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
    }
}

11. 结论

你创建了你的生日快乐应用。

在下一个 Codelab 中，你将向你的应用添加图片，并更改文本元素的对齐方式以美化它。

总结

  • Jetpack Compose 是一个用于构建 Android UI 的现代工具包。Jetpack Compose 通过更少的代码、强大的工具和直观的 Kotlin API 简化并加速了 Android 上的 UI 开发。
  • 应用的用户界面 (UI) 是你在屏幕上看到的内容：文本、图像、按钮以及许多其他类型的元素。
  • 可组合函数是 Compose 的基本构建块。可组合函数是一个描述 UI 部分的函数。
  • 可组合函数用 @Composable 注解修饰；此注解告知 Compose 编译器此函数旨在将数据转换为 UI。
  • Compose 中三个基本标准布局元素是 Column、Row 和 Box。它们是接受可组合内容的可组合函数，因此你可以在其中放置项目。例如，Row 中的每个子元素都将水平放置在彼此旁边。

了解更多