Android(kotlin) - JetPack Compose - Slot API

Slot API란?

어떠한 Composable 함수가 다른 Composable 함수나 Component를 포함하는 것을 Slot API라고 한다. (ex Raw, Column 등등)

💡 Composable 함수는 대문자로 시작!!

Slot API 예시

• Slot API를 만들때 마지막 파라미터에 content를 만드는게 편하다.
  → 마지막 인자를 { }에 옮겨 쓸 수 있기 때문.

• 아래 코드를 보면 CheckboxItemSolt에 인자로 content를 전달 받는다.
  이 content는 RowScope로 지정했다.
  따라서 CheckboxItemSolt에 보낼 content는 RowScope내 속성을 추가하여 사용할 수 있다.

• RowScope로 지정했기 때문에 Text의 align을 CenterVertically로 지정했다.

CheckboxItemSolt(checked1) {
     // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
     Text("체크박스 1", modifier = Modifier.align(Alignment.CenterVertically))
}

@Composable
fun CheckboxItemSolt(
    checked: MutableState<Boolean>,
    content: @Composable RowScope.() -> Unit, // 람다를 RowScope로 세팅하여 RowScope내에서 사용하는 것으로 지정할 수 있음
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickable {
            checked.value = !checked.value
        },
    ) {
        Checkbox(
            checked = checked.value,
            onCheckedChange = { checked.value = it },
        )
        content()
    }
}

@Composable
fun SlotEx() {
    val checked1 = remember { mutableStateOf(false) }
    val checked2 = remember { mutableStateOf(false) }

    Column {
        CheckboxItemSolt(checked1) {
            // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
            Text("체크박스 1", modifier = Modifier.align(Alignment.CenterVertically))
        }
        CheckboxItemSolt(checked2) {
            Text("체크박스 2")
        }
    }
}

CheckboxItemSolt안에서 체크박스 상태를 변경을 외부로 옮기기

• 위임할 수 있는 것은 밖으로 위임하는 것이 좋다!!
• 아래 코드를 살펴보면 onCheckedChanged를 외부로 위임했다.

@Composable
fun CheckboxItemSolt(
    checked: Boolean, // 변경하는 용도로만 사용
    onCheckedChanged: () -> Unit, // 체크박스의 상태
    content: @Composable RowScope.() -> Unit, // 람다를 RowScope로 세팅하여 RowScope내에서 사용하는 것으로 지정할 수 있음
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickable {
            onCheckedChanged()
        },
    ) {
        Checkbox(
            checked = checked,
            onCheckedChange = { onCheckedChanged() },
        )
        content()
    }
}

@Composable
fun SlotEx() {
    var checked1 by remember { mutableStateOf(false) }
    var checked2 by remember { mutableStateOf(false) }

    Column {
        CheckboxItemSolt(
            checked = checked1,
            onCheckedChanged = { checked1 = !checked1 },
        ) {
            // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
            Text("체크박스 1", modifier = Modifier.align(Alignment.CenterVertically))
        }
        CheckboxItemSolt(
            checked = checked2,
            onCheckedChanged = { checked2 = !checked2 },
        ) {
            // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
            Text("체크박스 2", modifier = Modifier.align(Alignment.CenterVertically))
        }
    }
}