撰写错误 - "Unresolved reference: align" 导入后
Compose error - "Unresolved reference: align" after importing
我正在尝试研究 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()
}
}
并非所有修饰符都可以与任何可组合项一起使用。它们特定于可组合项的类型或“范围”。 align
修饰符不能与 Column 可组合项一起使用。要在列中对齐您的内容,请使用 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))
){
}
}
align()
在 RowScope
或 ColumnScope
内定义,这实际上意味着您必须有一个父 Row
或 Column
包含可组合项,其中 align
正在使用,以便它可以对齐 w.r.t 父级。此外 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)
}
}
}
我正在尝试研究 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()
}
}
并非所有修饰符都可以与任何可组合项一起使用。它们特定于可组合项的类型或“范围”。 align
修饰符不能与 Column 可组合项一起使用。要在列中对齐您的内容,请使用 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))
){
}
}
align()
在 RowScope
或 ColumnScope
内定义,这实际上意味着您必须有一个父 Row
或 Column
包含可组合项,其中 align
正在使用,以便它可以对齐 w.r.t 父级。此外 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)
}
}
}