Jetpack Compose多Modifier参数组件的参数命名规范及Lint告警处理方案

When building Jetpack Compose components that need two or more Modifier parameters, the core goal is to use clear, context-aware names that immediately signal which part of the component each modifier targets. Let’s break down best practices for naming and how to resolve related Lint warnings:

1. Naming Multiple Modifier Parameters #

Skip generic labels like modifier1 or secondModifier—instead, tie each parameter name directly to the UI element it modifies. This makes your component’s API self-documenting, so users don’t have to dig into your implementation to understand what each modifier does.

For example:

• If your component includes an icon and text, use iconModifier and textModifier (like your sample code)
• For a card with a title and body, you might use cardModifier, titleModifier, contentModifier

Your example already nails this convention perfectly:

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

When calling the component, the intent is crystal clear:

CompletionSection(
    iconModifier = Modifier.layoutId("completedIcon"),
    textModifier = Modifier.layoutId("newTextField"),
    isActivated = isActivated,
    newText = newText
)

2. Fixing Lint Warnings for Modifier Naming #

Lint often flags custom modifier names because it expects a primary modifier parameter (the standard for most Compose components) that applies to the component’s root element. Here are two ways to address this:

Option 1: Add a Primary Root modifier #

Most Compose components include a top-level modifier for the root container. Adding this as your first parameter aligns with Compose’s conventions and resolves Lint warnings automatically. For example:

@Composable
private fun CompletionSection(
    modifier: Modifier = Modifier, // Primary root modifier
    iconModifier: Modifier = Modifier,
    textModifier: Modifier = Modifier,
    isActivated: Boolean,
    newText: String?
) {
    Box(modifier = modifier) { // Apply root modifier to the container
        if (isActivated) {
            // Icon implementation
        } else if (!newText.isNullOrBlank()) {
            // Surface + Text implementation
        }
    }
}

Option 2: Suppress the Warning (If Justified) #

If your component truly doesn’t need a root modifier, you can suppress the specific Lint rule with an annotation. Only do this if you’re certain a root modifier adds no value—following conventions makes your component more familiar to other Compose developers:

@Composable
@Suppress("ModifierParameter")
private fun CompletionSection(
    iconModifier: Modifier,
    textModifier: Modifier,
    isActivated: Boolean,
    newText: String?
) {
    // Component implementation
}

内容的提问来源于stack exchange，提问作者Sepideh Vatankhah