CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composemodifier
Sepideh Vatankhah
Sepideh Vatankhah

Reputation: 745

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

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

Upvotes: 6

Views: 1248

Answers (3)

Weiyi
Weiyi

Reputation: 1933

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier

Composables that accept modifiers to be applied to a specific subcomponent foo should name the parameter fooModifier and follow the same guidelines above for default values and behavior. Subcomponent modifiers should be grouped together and follow the parent composable's modifier. For example:

@Composable
fun ButtonBar(
    onOk: () -> Unit,
    onCancel: () -> Unit,
    modifier: Modifier = Modifier,
    buttonModifier: Modifier = Modifier
) {
    Row(modifier) {
        Button(onCancel, buttonModifier) {
            Text("Cancel")
        }
        Button(onOk, buttonModifier) {
            Text("Ok")
        }
    }
}

Upvotes: 3

Phil Dukhov
Phil Dukhov

Reputation: 87774

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
// ...

Upvotes: 2

lyrjie
lyrjie

Reputation: 166

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.

Upvotes: 1

Related Questions