将 Jetpack 可组合项在 UI 中水平居中，同时在可组合项本身内保持左对齐

Question

我正在尝试完成 Jetpack Compose 基础知识的代码实验室，但他们没有提供代码解决方案，这让我感到困惑。我读过无数其他 StackOverflow 帖子和博客（以及官方文档），了解如何使用 Spacer、horizontalAlignment 或 .weight 修饰符，无论我做什么，我都可以让所有内容居中（但不能左对齐），或者所有内容都在屏幕左边缘对齐，但不居中。我确实想出了一个使用 Spacers + .weight 修饰符组合的解决方案，它给了我我想要的东西，但它不能缩放到不同的屏幕尺寸。这看起来应该比实际情况容易得多，所以我认为我做错了什么。

这是我正在尝试构建的：

这是让我“一切都集中”的代码：

@Composable
fun ContactInfo(phone_text: String, social_text: String, email_text: String, modifier: Modifier = Modifier){
    val image = painterResource(R.drawable.android_logo)
    Column (
        modifier = modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    )
    {
        Row (
        ){
            Icon(
                Icons.Filled.Phone,
                contentDescription = stringResource(id = R.string.phone_android_content_desc),
                tint = Color(0xff056c3a),
                modifier = modifier
                    .padding(end=16.dp)
            )
            Text(
                text = phone_text,
                fontSize = 12.sp
            )
        }
        Row (
        ) {
            Icon(
                Icons.Filled.Share,
                contentDescription = stringResource(id = R.string.phone_android_content_desc),
                tint = Color(0xff056c3a),
                modifier = modifier
                    .padding(end=16.dp)
            )
            Text(
                text = social_text,
                fontSize = 12.sp,
            )
        }
        Row (
        ) {
            Icon(
                Icons.Filled.Email,
                contentDescription = stringResource(id = R.string.phone_android_content_desc),
                tint = Color(0xff056c3a),
                modifier = modifier
                    .padding(end=16.dp)
            )
            Text(
                text = email_text,
                fontSize = 12.sp,
            )
        }

    }
}

结果如下：

这是使用 Spacers 和 .weight 的代码，它给了我想要的东西，但不能缩放到不同的屏幕尺寸：

@Composable
fun ContactInfo(phone_text: String, social_text: String, email_text: String, modifier: Modifier = Modifier){
    val image = painterResource(R.drawable.android_logo)
    Column (
        modifier = modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    )
    {
        Row (
        ){
            Spacer(modifier = Modifier.weight(.5F))
            Icon(
                Icons.Filled.Phone,
                contentDescription = stringResource(id = R.string.phone_android_content_desc),
                tint = Color(0xff056c3a),
                modifier = modifier
                    .weight(.25F)
            )
            Text(
                modifier = modifier.weight(1F),
                text = phone_text,
                fontSize = 12.sp
            )
            Spacer(modifier = Modifier.weight(.5F))
        }
        Row (
        ) {
            Spacer(modifier = Modifier.weight(.5F))
            Icon(
                Icons.Filled.Share,
                contentDescription = stringResource(id = R.string.phone_android_content_desc),
                tint = Color(0xff056c3a),
                        modifier = modifier
                            .weight(.25F)
            )
            Text(
                modifier = modifier.weight(1F),
                text = social_text,
                fontSize = 12.sp,
            )
            Spacer(modifier = Modifier.weight(.5F))
        }
        Row (
        ) {
            Spacer(modifier = Modifier.weight(.5F))

            Icon(
                Icons.Filled.Email,
                contentDescription = stringResource(id = R.string.phone_android_content_desc),
                tint = Color(0xff056c3a),
                        modifier = modifier
                            .weight(.25F)
            )
            Text(
                text = email_text,
                modifier = modifier.weight(1F),
                fontSize = 12.sp,
            )
            Spacer(modifier = Modifier.weight(.5F))
        }
    }
}

结果如下：

Answer 1

您可以尝试以下方法。

Scaffold(
    bottomBar = {
        CustomBottomBar()
    }
) { paddingValues ->
    // your content
    Box(modifier = Modifier.padding(paddingValues))
}

观点

@Composable
fun CustomBottomBar() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
            .background(
                color = Color(210, 232, 213)
            ),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .wrapContentSize()
                .padding(top = 80.dp)

        ) {
            Column(
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                InfoRow(
                    text = "[phone]",
                    icon = Icons.Default.Phone
                )
                InfoRow(
                    text = "@AndroidDev",
                    icon = Icons.Default.Share
                )
                InfoRow(
                    text = "[email protected]",
                    icon = Icons.Default.Email
                )
            }
        }
    }
}


@Composable
fun InfoRow(text: String, icon: ImageVector) {
    Row(
        modifier = Modifier
            .wrapContentWidth()
            .padding(8.dp)
    ) {
        Icon(
            imageVector = icon,
            contentDescription = null,
            tint = Color(1, 109, 59)
        )

        Spacer(modifier = Modifier.width(25.dp))

        Text(text = text)
    }
}