Search code examples
androidkotlinandroid-jetpack-composemodifier

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

Solution

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