Android Compose 基础知识 - 项目：创建名片应用程序

Question

目前正在完成此练习 https://developer.android.com/codelabs/basic-android-kotlin-compose-business-card?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways %2Fandroid-basics-compose-unit-1-pathway-3%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-business-card并且没有提及在哪里在我需要编写的代码中应用图标和色调可组合项。

我还没有看到任何学习材料来建议在何处将 Icon 或 Tint 可组合项添加到书面代码中。

我已经尝试了几天来完成 Codelab，尽管我不知道如何应用图标或色调可组合项。

我已经学习第一单元一年多了，当时我觉得我应该完成整个课程。我什至无法通过他们的 Android Kotlin 基础知识课程中的第 1 单元。我想我是2021年开始学习的。

欢迎大家多多指教。

将所有代码应用到一个@Composable，并且所有文本都对齐良好。

我还添加了两个 @Composable，一个用于图像、我的姓名和标题，另一个 @Composable 用于联系信息。尽管当我将联系信息添加到第二个@Composable时，联系信息的格式不正确，并且将其自身定位在@Preview中的屏幕顶部。

对于如何继续进行有点迷茫，因为课程本身没有训练我完成练习代码实验室。

Answer 1

我会尽力为您提供解决方案并解释每个步骤。我希望它可以帮助您了解这是如何工作的。

请注意，获得相同结果的方法有很多种。这只是其中之一。

首先你需要一些东西来填满屏幕。我会用一个盒子来做这个。该框在这里很有用，因为我们可以轻松对齐它的子项。我们还将在这里应用背景颜色：

Box(modifier = Modifier
    .fillMaxSize()
    .background(Color(0xFFd2e8d4))
) {

在我的框中，我将创建两列：一列用于 Android 图标、全名和标题；另一列用于显示 Android 图标、全名和标题。以及其他联系人。

在 Codelab 上，他们展示了带有颜色的原型。红色轮廓将是我们的列，蓝色轮廓将是我们的行。

对于我的第一列，我将创建一个中心对齐的列：

Column(
        modifier = modifier
            .padding(horizontal = 16.dp)
            .fillMaxWidth()
            .align(Alignment.Center),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

请注意，我可以在此处使用

align

，因为此代码位于盒子内。

现在我有了居中对齐列，我将添加带有外部框的图标，只是为了添加它们在 Codelab 上的背景。请注意，我将忽略第一列的蓝线，因为我们不需要行：

Box(modifier = Modifier
            .size(104.dp)
            .background(Color(0xFF073042)),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.android_logo),
                contentDescription = null,
                modifier = Modifier.padding(8.dp)
            )
        }

我将添加全名元素：

Text(
            text = fullName,
            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
            fontSize = 35.sp
        )

还有标题，应用了不同的颜色：

Text(
            text = title,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF006d3b)
        )

请注意，我在全名文本中添加了

Modifier.padding(vertical = 8.dp)

，因为我们需要在元素之间留出一些空间。但是，您可以通过在列上使用

verticalArrangement = Arrangement.spacedBy(8.dp)

或在元素之间使用

Spacer(Modifier.height(8.dp))

来实现相同的效果。您可以选择对您的用例更有意义的一个。

现在我们完成了第一列，我们将创建联系人列。我们希望该列与屏幕底部对齐。为此，我们将再次使用

align

：

Column(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 16.dp)
            .width(IntrinsicSize.Max)
            .align(Alignment.BottomCenter),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

我在这里介绍

.width(IntrinsicSize.Max)

。这将告诉我们的列具有其最大子项的大小。通过使用它，我们可以保证我们的联系人元素都具有相同的大小。

正如我之前所说，Codelab 上的蓝线将是我们的行。对于第一列，我没有使用行，因为我们不需要它们（但如果需要，您可以添加行），但对于第二列，我们需要它们。

我们需要每条联系线都是一行，因为我们将同时有一个图标和一个文本。让我们编写电话联系人的代码：

Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Call,
                contentDescription = "phone",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = mobile,
                modifier = Modifier.fillMaxWidth()
            )
        }

注意

Icon

上的色调。我们用它来为我们选择的图标提供正确的颜色。

就这样，我们完成了布局。这是完整的代码：

Box(modifier = Modifier
    .fillMaxSize()
    .background(Color(0xFFd2e8d4))
) {

    Column(
        modifier = modifier
            .padding(horizontal = 16.dp)
            .fillMaxWidth()
            .align(Alignment.Center),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(modifier = Modifier
            .size(104.dp)
            .background(Color(0xFF073042)),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.android_logo),
                contentDescription = null,
                modifier = Modifier.padding(8.dp)
            )
        }
        Text(
            text = fullName,
            modifier = Modifier.padding(vertical = 8.dp),
            fontSize = 35.sp
        )
        Text(
            text = title,
            fontSize = 14.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF006d3b)
        )
    }

    Column(
        modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 16.dp)
            .width(IntrinsicSize.Max)
            .align(Alignment.BottomCenter),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Call,
                contentDescription = "phone",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = mobile,
                modifier = Modifier.fillMaxWidth()
            )
        }
        Row(
            modifier = Modifier
                .padding(bottom = 4.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Share,
                contentDescription = "social",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = social,
                modifier = Modifier.fillMaxWidth()
            )
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                Icons.Default.Email,
                contentDescription = "email",
                modifier = Modifier.padding(end = 16.dp),
                tint = Color(0xFF006d3b)
            )
            Text(
                text = email,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}