Jetpack [대왕놀] modifier in compose

Compose 의 Modifier 란 녀석을 View 를 꾸며주는 많은 역할을 한다.

Modifier 자체는 interface 이고, 이의 extension function 들이 사방에 널려 정의되어 있다.

에를 들어 Row 에서만 사용할 수 있는 Modifier 는 Row.kt 안의 RowScope interface 안에 정의되어 있고,

// Row.kt
@LayoutScopeMarker
@Immutable
interface RowScope {
    @Stable
    fun Modifier.weight(
        /*@FloatRange(from = 0.0, fromInclusive = false)*/
        weight: Float,
        fill: Boolean = true
    ): Modifier

    @Stable
    fun Modifier.align(alignment: Alignment.Vertical): Modifier

    @Stable
    fun Modifier.alignBy(alignmentLine: HorizontalAlignmentLine): Modifier

    @Stable
    fun Modifier.alignByBaseline(): Modifier

    @Stable
    fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int): Modifier
}

Offset 관련 구현들은 Offset.kt 에 정의되어 있다.

#

수 많은 Modifier 중에 자주 사용하는 녀석들만 정리해보고자 한다.

#

clickListener 주기

Row(
	modifier = Modifier
		.clickable { mViewModel.onCurrencyItemClicked(currency) }
)

#

여백 주기 (padding, margin) - 추가 정보

Row(
	modifier = Modifier
	.padding(
		start = 10.dp,
		top = 5.dp,
		bottom = 5.dp,
	),
)

#

width 최대치로 하기 (fill_parent, match_parent)

Text(
	text = "Hello!",
	modifier = Modifier.fillMaxWidth(),
)

#

width 를 내용물에 맞추기 (wrap_content)

Text(
	text = "Hello!",
	modifier = Modifier.wrapContentSize(),
)

#

weight 주기

Text(
	text = "Hello",
	modifier = Modifier.weight(1.0f),
)

#

Layout gravity 주기

Text(
	text = "Hello",
	modifier = Modifier.align(Alignment.CenterHorizontally),
)