Jetpack [대왕놀] Button in Compose

Android View 시스템의 Button 은 Compose 에서도 'Button' 이다.

#

Button 의 function signature 는 아래와 같다.

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

#

Compose Button 은 Android View 의 Button 과 다르게 clickListener 만 다루고, Text 는 따로 그려주어야 한다.

Button(onClick = { /* .. */ }) {
	Text(stringResource(R.string.start))
}

'이렇게 따로 Text 를 그려줄거면, Row, Column 등을 활용하며 clickable 을 주면 되지 않느냐?' 라는 의문이 든다.

Button 의 경우 기본적으로 'Button 처럼 생긴 View' 를 제공해준다.

기본값만 사용해도, corner 가 rounding 되고, background 는 primary color 가 지정되며, 기본 elevation 도 지정된다.

또한 Button 내부의 View 는 Row(LinearLayout orientation=horizontal) 처럼 작동하기에 안쪽에 별도로 Row 를 사용할 필요가 없다.

Button(onClick = { /* .. */ }) {
	Text(text = "Click ", color = Color.Magenta)
	Text(text = "Here", color = Color.Green)
}