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?