Kotlin Android Jetpack Compose：modifier参数写法及modifier与Modifier的区别疑问

1. Why use modifier: Modifier = Modifier as a parameter? #

This is a core best practice for Jetpack Compose composables, and it serves three key purposes:

• Optional customization: By setting a default value of Modifier (which is an empty, no-op modifier), you let callers of ProfileSection decide whether to pass in a custom modifier. If they don’t provide one, the composable maintains its default layout behavior.
• Boost reusability: This makes your composable flexible. For example, a caller could add padding, a background color, or adjust the component’s size by passing Modifier.padding(16.dp).background(Color.LightGray)—no need to modify the internal code of ProfileSection.
• Align with Compose’s philosophy: Compose uses modifiers instead of view subclassing to customize UI. Exposing a modifier parameter lets consumers tweak the composable’s appearance and layout from outside, following the "composition over inheritance" principle.

2. What's the difference between lowercase modifier and uppercase Modifier? Why doesn't changing Modifier to modifier cause an error but breaks the result? #

Let’s clarify the two first:

• Uppercase Modifier: This is a singleton object provided by Jetpack Compose. It’s the starting point for creating all layout and style modifiers (like fillMaxWidth(), padding(), or size()). When you call Modifier.fillMaxWidth(), you’re creating a new modifier instance that tells the composable to take up all available width.
• Lowercase modifier: This is the parameter you defined for ProfileSection. Its type is Modifier, and it uses the singleton Modifier as its default value (an empty modifier). It’s just a variable that holds a modifier instance passed in by the caller (or the default empty one if none is provided).

Why no error, but unexpected results? #

Changing Modifier.fillMaxWidth() to modifier.fillMaxWidth() is syntactically valid because modifier is a Modifier type variable—you can call all the same modifier functions on it. The behavior shift happens because:

• Original code: Column(modifier = Modifier.fillMaxWidth()) always applies fillMaxWidth() to the Column, ignoring the modifier parameter entirely.
• Modified code: If you replaced Modifier.fillMaxWidth() with just modifier (not modifier.fillMaxWidth()), the Column loses the fillMaxWidth() behavior. Since the default value of modifier is an empty modifier, the Column will now wrap its content instead of filling the screen width—this is likely why your result was unexpected.

The correct approach to keep both the caller’s custom modifiers and your required layout behavior is to combine them:

Column(modifier = modifier.fillMaxWidth())

This way, any modifier passed in by the caller is applied, and the Column still retains its fillMaxWidth() behavior.

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