Can't use implicit or explicit receiver when inside Box scope

Question

I'm learning Jetbrains' "Compose Multiplatform" which is based on Jetpack Compose.

Some info

• Kotlin: 1.5.31
• Intellij: 2021.3.1

So when building the code below I get the error:

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

This error is showing up at this line:

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

I have tried adding the full package to Modifier like androidx.compose.ui.Modifier.align() but it still errors out about the receiver. This error goes away if it is not inside either a Row, Column, or Box layout. I haven't tried many others to see if they have problems too. This framework is still alpha I do believe so I just wanna make sure I'm not missing something before I post an issue on github cause I can't find anyone else referencing this issue.

Reproduce:

1. Create new project (Compose Multiplatform Application)
2. Replace App.kt (common -> src -> commonMain -> kotlin) with code below

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 is more like child view's layout_gravity in FrameLayout. It's depend on outer layer (in compose you have Box, Row, Column).

Alignment.CenterHorizontally cannot be used in BoxScope.

Look at Modifier.align, it has three definition:

• androidx.compose.foundation.layout.BoxScope#align(alignment: Alignment)
• androidx.compose.foundation.layout.ColumnScope#align(alignment: Alignment.Horizontal)
• androidx.compose.foundation.layout.RowScope#align(alignment: Alignment.Vertical)

See parameter, CenterHorizontally is androidx.compose.ui.Alignment.Horizontal.In BoxScope you can only use androidx.compose.ui.Alignment:

• TopStart
• TopCenter
• TopEnd
• CenterStart
• Center
• CenterEnd
• BottomStart
• BottomCenter
• BottomEnd

Here is a Modifier playground. https://github.com/c5inco/Compose-Modifiers-Playground