I was trying to study android jetpack compose and I have found some errors in my code.

'Modifier' has .align attributes but it doesn't work...

Other padding, clip, etc is working right.

I use

Android Studio Arctic Fox | 2020.3.1 Patch 3 Build #AI-203.7717.56.2031.7784292, built on October 1, 2021 Runtime version: 11.0.10 0-b96-7249189 amd64

Kotlin 1.6.0

My full code:

package com.joung.week2_layout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.joung.week2_layout.ui.theme.Week2LayoutTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Week2LayoutTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    NameTag()
                }
            }
        }
    }
}

@Composable
fun NameTag() {
    Row{
        Surface(
            modifier = Modifier
                .size(50.dp)
                .padding(all = 4.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            // image url
        }
    }
    Column (
        modifier = Modifier
            .padding(all = 8.dp)
            .align(Alignment.CenterVertically)
            .clip(RoundedCornerShape(4.dp))
            ){
        Text(text = "Joung", fontWeight = FontWeight.Bold)
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text(text = "PHONE NUMBER", style = MaterialTheme.typography.body2)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun CardPreview() {
    Week2LayoutTheme {
        NameTag()
    }
}

CodePudding user response：

Not all modifiers can be used with any composable. They are specific to the type or "scope" of the composable. The align modifier cannot be used with the Column composable. To align your content in a Column, use the verticalArrangement or horizontalAlignment parameters. To center vertically, use verticalArrangement = Arrangement.Center. Also, you are not setting the size of the Column. You should set this. In this example, I set it to fillMaxSize. And finally, on a side note, you should be using only the official version of Kotlin. Currently it is 1.5.31 and not 1.6. Using a newer version can cause major issues if Google hasn't been using it yet:

Column (
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .fillMaxSize()
            .padding(all = 8.dp)
            .clip(RoundedCornerShape(4.dp))
            ){

            }
        }

CodePudding user response：

align() is defined inside RowScope or ColumnScope which essentially means you must have a parent Row or Column containing the composable where align is being used so that it can align w.r.t the parent. Moreover for Column align will be in the horizontal direction and vice versa.

I am not sure about the difference with align() but there is a horizontalAlignment (for Columns) and horizontalArrangement (for Rows) attribute as well for your help. For example:

Column {
    Column(
        modifier = Modifier
            .padding(all = 8.dp).clip(RoundedCornerShape(4.dp)).align(Alignment.CenterHorizontally),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Joung", fontWeight = FontWeight.Bold)
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text(text = "PHONE NUMBER", style = MaterialTheme.typography.body2)
        }
    }
}