[Relay] Slot 구현하기

Compose에서 slot이란 사용자가 원하는 뷰로 채울 수 있게 비워둔 공간을 의미한다. 주로 컨테이너 역할을 하는 composable을 구현할 때 사용하는 패턴이다. 예를 들어 ``TopAppBar``에는 다음 그림처럼 빈 공간이 3개 있는데, 왼쪽부터 각각 ``navigateIcon``, ``title``, ``actions``를 위한 공간으로 할당되어 있다.

아이콘, 제목, 액션

@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: (@Composable () -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
): Unit

Relay에서도 slot API를 구현할 수 있다. 정확히는 동적인 자식 컴포넌트를 만드는 방식으로 구현된다.

Figma에서 children parameter 추가하기

Slot으로 지정할 공간을 선택한 후, Relay 플러그인에서 Parameters - children 항목을 눌러 해당 공간을 children으로 지정한다.나는 이미지 밑의 공간을 slot으로 지정했다.

이미지 밑의 공간이 children으로 지정되었다. Android Studio에서 확인해 보면 정말로 ``buttons`` 매개변수가 추가됐다. 이제 저 공간은 사용자가 원하는 대로 사용할 수 있다. 

/**
 * This composable was generated from the UI Package 'image_selector'.
 * Generated code; do not edit directly
 */
@Composable
fun ImageSelector(
    modifier: Modifier = Modifier,
    buttons: @Composable RelayContainerScope.() -> Unit
) {
    TopLevel(modifier = modifier) {
        Image()
        Buttons {
            buttons()
        }
    }
}

프리뷰에는 Figma에서 만든 대로 두 개의 버튼이 보여지지만, 이건 프리뷰일 뿐 사용자가 content를 제공하지 않는다면 그저 빈 공간으로 남아있게 된다.

프리뷰 코드를 보면 이전에 만들었던 ``SampleButton``이 재활용된 모습을 확인할 수 있다. Figma에서 UI를 만들 때 실제로 component를 재활용했기 때문이다.

@Preview(widthDp = 200, heightDp = 150)
@Composable
private fun ImageSelectorPreview() {
    RelayTestTheme {
        ImageSelector(
            buttons = {
                SampleButton(text = "Cancel")
                SampleButton(text = "Select")
            }
        )
    }
}

더 보기

하위 매개변수  |  Android 개발자  |  Android Developers