已删除文本 - DPO 请求 - 谢谢

Question

已删除文本 - DPO 请求 - 谢谢

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()
            )
        }
    }
}