撰写错误 - 导入后“未解析的参考：对齐”答案

【问题标题】：Compose error - "Unresolved reference: align" after importing撰写错误 - 导入后“未解析的参考：对齐”
【发布时间】：2021-12-29 23:44:33
【问题描述】：

我正在尝试研究 android jetpack compose，但在我的代码中发现了一些错误。

Modifier 有 .align 属性但它不起作用。

填充、剪辑等其他修饰符正常工作。

我用

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

我的完整代码：

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

【问题讨论】：

标签： android kotlin android-layout android-jetpack-compose android-jetpack

【解决方案1】：

并非所有修饰符都可以与任何可组合使用。它们特定于可组合的类型或“范围”。 align 修饰符不能与可组合的列一起使用。要在列中对齐您的内容，请使用 verticalArrangement 或 horizontalAlignment 参数。要垂直居中，请使用verticalArrangement = Arrangement.Center。此外，您没有设置列的大小。你应该设置这个。在此示例中，我将其设置为 fillMaxSize。最后，附带说明一下，您应该只使用官方版本的 Kotlin。目前它是 1.5.31 而不是 1.6。如果 Google 尚未使用较新版本，则可能会导致重大问题：

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

            }
        }

【讨论】：

【解决方案2】：

align() 在RowScope 或ColumnScope 中定义，这实际上意味着您必须有一个父级Row 或Column 包含使用align 的可组合对象，以便它可以与父级对齐。此外，Column 对齐将在水平方向，反之亦然。

我不确定与align() 的区别，但还有horizontalAlignment（用于列）和horizontalArrangement（用于行）属性以及您的帮助。例如：

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

【讨论】：