Jetpack compose , Trying to find an efficient way to align elements within rows which are inside a c-CodePudding

I want to align my contact elements as in the picture but I don't want to use padding and spacer, because it will look different on different devices(mb Im wrong). So how can I get such an output of elements?

[This is what I want it to look like] (

CodePudding user response：

I don't want to use padding and spacer, because it will look different on different devices

I don't think this is correct. If you use padding for your Composables and test it on different devices with different screen sizes, the padding you set for them is the same.
But if you don't use Modifier.fillMaxWidth() or Modifier.fillMaxHeight() or Modifier.fillMaxSize(), You may get some empty space around your Composable because you didn't tell it to fill the screen.

So for your rows this is what I suggest you to do:
First create a Composable representing a row. I'm calling it TextWithIcon:

@Composable
fun TextWithIcon(
    modifier: Modifier = Modifier,
    title: String,
    icon: ImageVector
) {
        Row(
            modifier = modifier.padding(vertical = 16.dp, horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(imageVector = icon, contentDescription = null)
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = title)
    }
}

Next, use it in your screen for each row:

@Composable
fun loadContactInfo(
    phoneNum: String = stringResource(R.string.my_phone_num),
    TGLink: String = stringResource(R.string.telegram_link),
    emailAddress: String = stringResource(R.string.email_adress)
) {
    Column(
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        TextWithIcon(
            modifier = Modifier.fillMaxWidth(),
            title = phoneNum,
            icon = Icons.Default.Phone
        )
        TextWithIcon(
            modifier = Modifier.fillMaxWidth(),
            title = TGLink,
            icon = Icons.Default.Share
        )
        TextWithIcon(
            modifier = Modifier.fillMaxWidth(),
            title = emailAddress,
            icon = Icons.Default.Email
        )
}