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