[Compose] 16. Slot API

Slot API란?

• Android Jetpack Compose에서 UI 요소를 구성할 때 유연성을 제공하기 위한 설계 패턴입니다.
• 어떤 Composable 함수가 다른 Composable 함수 또는 컴포넌트를 포함할 수 있게 되어 있다.
  • Column, Row, TopAppBar도 slot API에 속한다.
• 쉽게 말하면, Slot API는 부모 Composable이 자식 Composable을 특정 위치에 삽입하도록 허용하는 기능입니다.
• 이를 통해 더 유연하고 재사용 가능한 UI 컴포넌트를 설계할 수 있습니다.

예제를 통해 알아보자

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestComposeTheme {
                SlotEx()
            }
        }
    }

}

@Composable
fun checkboxWithSlot(
    checked: Boolean,
    onCheckedChange: () -> Unit,
    content: @Composable RowScope.() -> Unit,
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickable {
            onCheckedChange()
        }) {
        Checkbox(
            checked = checked,
            onCheckedChange = { onCheckedChange() }
        )
        content()
    }
}

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

    Column {
        checkboxWithSlot(checked = checked1, onCheckedChange = { checked1 = !checked1 }
        ) {
            Text(text = "지디")
        }
        checkboxWithSlot(checked = checked2, onCheckedChange = { checked2 = !checked2 }
        ) {
            Text(text = "태양")
        }
    }

}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    TestComposeTheme {
        SlotEx()
    }
}