在 Box 范围内时无法使用隐式或显式接收器

Question

我正在学习 Jetbrains 的“Compose Multiplatform”，它基于 Jetpack Compose。

一些信息

• 科特林：1.5.31
• Intellij：2021.3.1

因此，在构建下面的代码时，我收到错误：

fun Modifier.align(alignment: Alignment.Horizontal): Modifier' can't be called in this context by implicit receiver. Use the explicit one if necessary

此错误出现在这一行：

Icon(Icons.Filled.Close, "", Modifier.align(Alignment.CenterHorizontally))

Modifier我已经尝试添加完整的包androidx.compose.ui.Modifier.align()，但它仍然出现关于接收器的错误。如果它不在Row、Column或Box布局内，此错误就会消失。我没有尝试过其他很多人来看看他们是否也有问题。我相信这个框架仍然是 alpha，所以我只是想确保在 github 上发布问题之前我没有遗漏任何东西，因为我找不到其他人引用这个问题。

复制：

1. 创建新项目（编写多平台应用程序）
2. 将 App.kt (common -> src -> commonMain -> kotlin) 替换为以下代码

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Composable
fun App() {

    Scaffold(
        topBar = {
            TopAppBar {
                IconButton(onClick = {}) {
                    Icon(Icons.Filled.Menu, contentDescription = "")
                }
            }
        },
        drawerContent = {
            Box(modifier = Modifier.padding(8.dp), contentAlignment = Alignment.Center) {
                Text("Some Text", fontWeight = FontWeight.Bold)
                Icon(Icons.Filled.Close, "", Modifier.align(Alignment.CenterHorizontally))
            }

            Divider()
        }
    ) { }
}

Answer 1

Modifier.align 更像是layout_gravityFrameLayout 中的子视图。它取决于外层（在组合中你有 Box、Row、Column）。

Alignment.CenterHorizontally不能在 BoxScope 中使用。

看一下Modifier.align，它有三个定义：

• androidx.compose.foundation.layout.BoxScope#align(对齐：对齐)
• androidx.compose.foundation.layout.ColumnScope#align(对齐方式：Alignment.Horizo​​ntal)
• androidx.compose.foundation.layout.RowScope#align(对齐方式：Alignment.Vertical)

查看参数，CenterHorizo​​ntally是androidx.compose.ui.Alignment.Horizontal。在 BoxScope 中只能使用androidx.compose.ui.Alignment：

• 拓斯达
• 顶中心
• 高端
• 中心启动
• 中心
• 中心端
• 底部开始
• 底部中心
• 底端

这是一个修改器游乐场。https://github.com/c5inco/Compose-Modifiers-Playground