androidandroid-jetpack-composeandroid-jetpackandroid-compose-appbar

TopAppBar in jetpack compose without scaffold gives error


TopAppBar(title = { Text(text = "Notes") },actions = {Icon(imageVector =Icons.Default.Notifications,contentDescription = "Notif",)},) {}

when I try running the above code I get the following error "None of the following functions can be called with the arguments supplied." When I look into the declaration of TopAppBar , there are two Composables of same name however only the Composable which I want cannot be used ! Any tips?


Solution

  • It happens because there is no matching functions with parameters you provided. Because of function overloading there can be several functions with slightly different parameters. Best way to avoid ambiguity is to use named parameters.

    @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
    ) 
    

    closest one to yours is above and which can be set as

    TopAppBar(
        title = { Text(text = "Notes") },
        actions = {
            Icon(
                imageVector = Icons.Default.Notifications,
                contentDescription = "Notif",
            )
        }
    )
    

    Or you can use this one

    @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
    )
    

    such as

    TopAppBar(
        // other params
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            Text(text = "Notes")
            Spacer(modifier = Modifier.weight(1f))
            Icon(
                imageVector = Icons.Default.Notifications,
                contentDescription = "Notif"
            )
        }
    }