컴포즈 Compose @PreviewParameter 사용법

컴포즈로 프로젝트를 개발할 때 컴포저블 함수에 매개변수가 있을 경우 @Preview가 동작하지 않는다
이 때 @PreviewParameter를 사용하면 매개변수의 값에 따른 각각의 Preview를 확인할 수 있다.

먼저 @PreviewParameter를 사용하려면 PreviewParameterProvider를 구현한 클래스를 작성해야 한다.

class SettingScreenParameterProvider: PreviewParameterProvider<MutableState<Boolean>> {
    override val values = sequenceOf(mutableStateOf(true), mutableStateOf(false))
}

참고로 PreviewParameterProvider 코드는 아래와 같다.

interface PreviewParameterProvider<T> {
    /**
     * [Sequence] of values of type [T] to be passed as @[Preview] parameter.
     */
    val values: Sequence<T>

    /**
     * Returns the number of elements in the [values] [Sequence].
     */
    val count get() = values.count()
}

그다음 Preview를 사용하고 싶은 컴포저블함수에 직접 Preview 어노테이션을 달지 않고
Preview를 위한 컴포저블 함수를 별도로 만들어준다.

// Preview를 위한 컴포저블 함수
@Preview(showBackground = true)
@Composable
fun SettingScreenPreview(){
    SettingScreen(darkThemeState)
}

// 실제 사용할 컴포저블 함수
@Composable
fun SettingScreen(
    darkThemeState: MutableState<Boolean>,
){
	...
}

그 다음 Preview함수에 매개변수로 @PreviewParameter를 넣어주고 필요한 provider로 앞서 작성한 SettingScreenParameterProvider를 넣어준다.

@Preview(showBackground = true)
@Composable
fun SettingScreenPreview(
    @PreviewParameter(SettingScreenParameterProvider::class) darkThemeState: MutableState<Boolean>
){
    SettingScreen(darkThemeState)
}

이렇게 작성하면 미리보기 화면에 매개변수 값에 따른 화면을 각각 확인할 수 있다!

이런 방식으로 매개변수가 들어가는 컴포저블 함수인 경우에는 @PreviewParameter를 이용해 @Preview화면을 확인할 수 있다!