how should name the modifier params in Jetpack compose component which gets two or more modifiers?

user_6907865 0
Viewed 392

If we have a compose component which gets two or more modifiers, how should we handle it ? I mean the naming of modifiers while lint complains changing the name of modifier parameter

Sample code to figure out easily :

@Composable
    private fun CompletionSection(iconModifier: Modifier, textModifier: Modifier, isActivated: Boolean, newText: String?) {
        if (isActivated) {
            Icon(
                painter = painterResource(R.drawable.ds_ic_check_circle),
                modifier = iconModifier
                    .wrapContentSize()
                    .padding(top = 18.dp),
                tint = MaterialTheme.colors.positive,
                contentDescription = null
            )
        } else if (!newText.isNullOrBlank()) {
            Surface(
                modifier = textModifier.padding(top = 18.dp),
                shape = RoundedCornerShape(32.dp),
                border = BorderStroke(width = 2.dp, color = MaterialTheme.colors.primary.copy(alpha = 0.6f)),
            ) {
                Text(
                    overflow = TextOverflow.Ellipsis,
                    maxLines = 1,
                    fontSize = 11.sp,
                    color = MaterialTheme.colors.primary.copy(alpha = 0.6f),
                    text = newText,
                    modifier = Modifier
                        .defaultMinSize(minHeight = 20.dp)
                        .wrapContentSize()
                        .padding(horizontal = 6.dp, vertical = 2.dp),
                    style = MaterialTheme.typography.android.caption2
                )
            }
        }
    }

Here, where the function is used →

ConstraintLayout(
    modifier = Modifier.fillMaxSize(),
    constraintSet = decoupledConstraints(
        marginSpacing02 = marginSpacing02,
        marginSpacing01 = marginSpacing01,
        entity = entity
    )
) {
    
    CompletionSection(
        iconModifier = Modifier.layoutId("completedIcon"),
        textModifier = Modifier.layoutId("newTextField"),
        isActivated = isActivated,
        newText = newText
    )
}
android-jetpack-compose kotlin modifier android
2 Answers

I assume the reason for this kind of warning is because you usually have one modifier that has to be applied to the whole view. Having an other modifier in arguments is kind of OK, but, for example if you need to apply Modifier.align, you had to duplicate it.

In your case, when you look from where you're using this function, it's hard to tell which modifier will be applied and which is not - it depends on other parameters and you have to know the logic.

I think at least it could have one generic modifier named modifier, which would apply for both views, and two named ones - in my opinion this would make the API a bit more predictable. You can chain modifiers like this: modifier.then(iconModifier).yourModifier()

Anyway, you can suppress it:

@SuppressLint("ModifierParameter")
@Composable
// ...
user_35857960

Composables are designed to accept only one Modifier, so the lint won't be satifsfied no matter how you rename them.
The Composable is something like a unit of interface, and it having multiple modifiers is leaking its inner workings to the outer composables that use it.

user_75293690
Related