kotlin Jetpack Compose中的对齐命令:基于第一行定位

wmomyfyw  于 2023-10-23  发布在  Kotlin
关注(0)|答案(3)|浏览(108)


在Android Jetpack Compose中,我有三行,我想将第二行和第三行定位在与第一行完全相同的水平位置。它们应该仅仅基于第一行的位置来对齐。
这就是代码:

Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 48.dp)
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {

            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_phone_24),
                contentDescription = null,
                )
            Text(
                text = "+11 (123) 444 555 666",

                )
        }

        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center

        ) {
            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_share_24),
                contentDescription = null
            )
            Text(
                text = "@AndroidDev",

                )
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center

        ) {
            Image(
                modifier = Modifier.padding(end = 32.dp),
                painter = painterResource(R.drawable.baseline_email_24),
                contentDescription = null
            )
            Text(
                text = "[email protected]",

                )
        }
    }
fv2wmkja

fv2wmkja1#

尝试使用start for horizontalArrangement

Row(modifier = Modifier.fillMaxWidth(), 
   horizontalArrangement = Arrangement.Start)
im9ewurl

im9ewurl2#

在多次尝试ChatGPT和Bard提供灾难性的解决方案后,我终于找到了一个没有他们帮助的解决方案,通过跳出Jetpack Compose的框架来思考:

Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 16.dp, bottom = 48.dp),
        horizontalArrangement = Arrangement.Center,
    ) {
        Column{
            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_phone_24),
                contentDescription = null,
            )
            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_share_24),
                contentDescription = null
            )

            Image(
                modifier = Modifier.padding(end = 32.dp),
                painter = painterResource(R.drawable.baseline_email_24),
                contentDescription = null
            )
        }
        Column{
            Text(
                text = "+11 (123) 444 555 666",
                modifier = Modifier.padding(bottom = 16.dp),
                )
            Text(
                text = "@AndroidDev",
                modifier = Modifier.padding(bottom = 16.dp),
                )
            Text(
                text = "[email protected]",
                )
        }
    }
dwbf0jvd

dwbf0jvd3#

你的答案并不完全正确,因为它们并不完全一致。我看到文本被向上移动,特别是在第三个。
这是一个干净的代码。尽量写干净的代码,不要重复:

// Centered
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
    Column(
        modifier = Modifier
            .padding(top = 16.dp, bottom = 32.dp),
    ) {
        RowComposable(icon = Icons.Rounded.Call, textRow = "+11 (123) 444 555 666")
        RowComposable(icon = Icons.Rounded.Share, textRow = "@AndroidDev")
        RowComposable(icon = Icons.Rounded.Email, textRow = "[email protected]")
    }
}
// With padding start as mentioned in my initial post
Column(
    modifier = Modifier
        .padding(top = 16.dp, bottom = 32.dp, start = 42.dp),
) {
    RowComposable(icon = Icons.Rounded.Call, textRow = "+11 (123) 444 555 666")
    RowComposable(icon = Icons.Rounded.Share, textRow = "@AndroidDev")
    RowComposable(icon = Icons.Rounded.Email, textRow = "[email protected]")
}

然后,您只能在一个地方进行更改:

@Composable
fun RowComposable(
    icon: ImageVector,
    textRow: String
) {
    Column {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Icon(imageVector = icon, contentDescription = null)
            Spacer(Modifier.width(32.dp))
            Text(
                text = textRow
            )
        }
        Spacer(Modifier.height(16.dp))
    }
}

示例图片:

相关问题