Jetpack Compose Modifier.fillMaxWidth.align 编译失败

Question

像这样声明 Box 会导致编译错误

           Box(modifier = Modifier
                             .fillMaxWidth()
                             .align(Alignment.Center)) {
                            Text(text = "Hello")
                          }

align 的导入看起来像这样

import androidx.compose.foundation.layout.BoxScopeInstance.align

错误

Cannot access 'BoxScopeInstance': it is internal in 'androidx.compose.foundation.layout'

撰写版本 = 1.1.1

Kotlin 版本 = 1.6.10

Android Studio 版本 = Android Studio Electric Eel | 2022.1.1 金丝雀 2

Answer 1

align 应该从 Box

的内容中调用

Box(
    modifier = Modifier.fillMaxWidth()
) {
    Text(
        modifier = Modifier.align(Alignment.Center),
        text = "foobar"
    )
}

或者使用 contentAlignment

Box(
    modifier = Modifier.fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    Text(
        text = "foobar"
    )
}

Answer 2

modifier.align()方法只能在Box、Column、Row布局范围内使用。

例如，像这样的东西。

Column(modifier = Modifier.fillMaxWidth()) {
  Text("Hello")
  Text("World", modifier = Modifier.align(Alignment.CenterHorizontally))
  Row(Modifier.align(Alignment.End)) {
     Icon(....)
  }
}

在Column中使用align只能设置属性为Alignment.Horizontal的Alignment，如CenterHorizo​​ntally，Start，End。

在Row中使用align只能设置属性为Alignment.Vertical的Alignment，如CenterVertically Top, Bottom

使用Box中的align设置除Alignment.Vertical和Alignment.Horizontal以外的Alignment，如TopStart、TopCenter、TopEnd、Center、BottomStart、BottomCenter、BottomEnd。