Where does "it" come from in this call of a composable function?

Question

I found a code example from the Android Developers Codelab, which deals with Navigation in Jetpack Compose, it is the "Rally Material study", the code is on GitHub right here: NavigationCodeLab

Even though I originally wanted to focus on navigation, I am struggling to understand some of the function calls and lambdas.

In a "OverviewScreen" composable, amongst others the "AccountsCard" is called:

//other composable code

AccountsCard(
            onClickSeeAll = onClickSeeAllAccounts,
            onAccountClick = onAccountClick
        )

//other composable code

The AccountsCard is defined as follows:

private fun AccountsCard(onClickSeeAll: () -> Unit, onAccountClick: (String) -> Unit) {
    val amount = UserData.accounts.map { account -> account.balance }.sum()
    OverviewScreenCard(
        title = stringResource(R.string.accounts),
        amount = amount,
        onClickSeeAll = onClickSeeAll,
        data = UserData.accounts,
        colors = { it.color },
        values = { it.balance }
    ) { account ->
        AccountRow(
            modifier = Modifier.clickable { onAccountClick(account.name) },
            name = account.name,
            number = account.number,
            amount = account.balance,
            color = account.color
        )
    }
}

Note the colors = {it.color} and values = {it.balance} - this is basically the point I am struggling with.

UserData defines some objects with "fake user data", amongst others using the Account class:

@Immutable
data class Account(
    val name: String,
    val number: Int,
    val balance: Float,
    val color: Color
)

UserData.accounts is a List<Account> with fake data.

AccountRow is defined as follows:

@Composable
fun AccountRow(
    modifier: Modifier = Modifier,
    name: String,
    number: Int,
    amount: Float,
    color: Color
) {
    BaseRow(
        modifier = modifier,
        color = color,
        title = name,
        subtitle = stringResource(R.string.account_redacted) + AccountDecimalFormat.format(number),
        amount = amount,
        negative = false
    )
}

The OverviewScreenCard:

@Composable
private fun <T> OverviewScreenCard(
    title: String,
    amount: Float,
    onClickSeeAll: () -> Unit,
    values: (T) -> Float,
    colors: (T) -> Color,
    data: List<T>,
    row: @Composable (T) -> Unit
) {
    Card {
        Column {
            Column(Modifier.padding(RallyDefaultPadding)) {
                Text(text = title, style = MaterialTheme.typography.subtitle2)
                val amountText = "$" + formatAmount(
                    amount
                )
                Text(text = amountText, style = MaterialTheme.typography.h2)
            }
            OverViewDivider(data, values, colors)
            Column(Modifier.padding(start = 16.dp, top = 4.dp, end = 8.dp)) {
                data.take(SHOWN_ITEMS).forEach { row(it) }
                SeeAllButton(
                    modifier = Modifier.clearAndSetSemantics {
                        contentDescription = "All $title"
                    },
                    onClick = onClickSeeAll,
                )
            }
        }
    }
}

The BaseRow is rather long, I skip it for now, as it is essentially "just" defining the actual looks of the composable, also I leave out the OverViewDivider as I don't think it contributes to clarification.

My understanding is that from the OverviewScreen the AccountsCard is called. The AccountsCard itself calls the OverviewScreenCard and provides the required parameters, amongst others the UserData.accounts as a list, of which OverviewScreeCard then takes SHOWN_ITEMS (= 3) items and iterates over them, for each of them calling the Composable passed in row, which in turn is passed by AccountsCard as AccountRow. This is where I am losing track.

I have worked a little with lambdas, but there is still a lot to understand, which I guess is the case here. So I assume the account -> in the call to AccountRow is the it from the .forEach. it, each of the first three accounts, is passed as argument to the AccountRow and used to build that row.

Where is the it in colors = {it.color} and values = {it.balance} coming from?

Answer 1

Where is the it in colors = {it.color} and values = {it.balance} coming from?

OverviewScreenCard() defines those parameters as function types that take a parameter:

    values: (T) -> Float,
    colors: (T) -> Color,

Whatever lambda expression or other function type that you supply for values and colors can use it to refer to that parameter. Or, you could give it a name, if you prefer:

        colors = { account -> account.color },
        values = { account -> account.balance }

The generic T is going to be inferred by the Kotlin compiler, probably principally by the type passed into the data parameter. In your use of OverviewScreenCard(), you are passing in a List<Account>, and so long as colors and values would compile if the passed-in parameter is an Account, the Kotlin compiler is happy.

also I leave out the OverViewDivider as I don't think it contributes to clarification

It is what is consuming values and colors. So, the question of "where does the actual parameter value passed to those lambdas come from" is answered by the OverViewDivider() implementation, which is not part of your question.