My IDE is showing that navigationIcon is not a composable function. Other people are doing the same thing. I'm getting this error
@composable invocations can only happen from the context of an @composable function
@Composable
fun AppBar(onClick: () -> Unit){
TopAppBar(
title = "Princess World",
navigationIcon = {
IconButton(onClick = onClick) {
Icon(imageVector = Icons.Default.Menu, contentDescription = null)
}
},
) {}
}
I'm unable to use composable functions inside of title and navigation icon {}
@Composable
fun AppBar(onClick: () -> Unit){
TopAppBar(title = { }, navigationIcon = { }) {
}
}
CodePudding user response:
Looks like there are 2 TopAppBar composable that you have to invoke properly with their corresponding parameters.
This one,
@Composable
fun AppBar(onClick: () -> Unit) {
TopAppBar(
title = { Text (text = "Princess World") },
navigationIcon = {
IconButton(onClick = onClick) {
Icon(imageVector = Icons.Default.Menu, contentDescription = null)
}
}
)
}
calling this one from the API,
@Composable
fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable (() -> Unit)? = null,
actions: @Composable RowScope.() -> Unit = {},
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = AppBarDefaults.TopAppBarElevation
) { … }
or this one,
TopAppBar {
}
calling this from the API
@Composable
fun TopAppBar(
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = AppBarDefaults.TopAppBarElevation,
contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
) { … }
CodePudding user response:
You have to remove the final {}
:
TopAppBar(
title = { Text("Princess World") },
navigationIcon = {
IconButton(onClick = onClick) {
Icon(imageVector = Icons.Default.Menu, contentDescription = null)
}
}
)