android/codelab-android-compose

[AdvancedStateAndSideEffectsCodelab] injected Modifier in CraneTabBar not used

pitoszud opened this issue · 3 comments

You are injecting modifier - Row(modifier), and then you call Modifier.width(8.dp), Modifier.padding(8.dp) etc... instead of modifier.width(8.dp), modifier.padding(8.dp) etc.
Is it a typo, or it was intentional? If so, what's the benefit and why injecting Modifier at all (in this case)?

@Composable
fun CraneTabBar(
    modifier: Modifier = Modifier,
    onMenuClicked: () -> Unit,
    children: @Composable (Modifier) -> Unit
) {
    Row(modifier) {
        // Separate Row as the children shouldn't have the padding
        Row(Modifier.padding(top = 8.dp)) {
            Image(
                modifier = Modifier
                    .padding(top = 8.dp)
                    .clickable(onClick = onMenuClicked),
                painter = painterResource(id = R.drawable.ic_menu),
                contentDescription = stringResource(id = R.string.cd_menu)
            )
            Spacer(Modifier.width(8.dp))
            Image(
                painter = painterResource(id = R.drawable.ic_crane_logo),
                contentDescription = null
            )
        }
        children(
            Modifier
                .weight(1f)
                .align(Alignment.CenterVertically)
        )
    }
}

The modifier is used in the outer Row
Row(modifier) { ...

Benefit is that u can modify the Row itself without translating this modification to the element itself.
As an example: u could set a fillMaxSize() to the outer Row without modifying the Elements inside it.

In which part of the outer row it is being used?

@composable
fun CraneTabBar(
modifier: Modifier = Modifier,
onMenuClicked: () -> Unit,
children: @composable (Modifier) -> Unit
) {
Row(modifier) { <- here
// Separate Row as the children shouldn't have the padding