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

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:

Create new project (Compose Multiplatform Application)
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()
        }
    ) { }
}

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:

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

Recommended topics

Hot tags