[Compose] scaffold

scaffold

- slot api의 확장 

- paramater로 여러 슬롯을 제공하여 다양한 UI(ex : topBar, bottomBar, floatingActionButton, drawerContent, content)을 쉽게 정의하고 구성 가능 

- 기본틀로 사용하면 체계적으로 개발하기 좋다 

 

- Scaffold는 기본적으로 content 슬롯에 패딩을 적용해야하고 아니면 아래와 같은 에러가 뜬다 

Content padding parameter it is not used More

 

 

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldTest() {
    var checked by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                navigationIcon =  {
                    IconButton(onClick = { }) {
                        Image(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null)
                    }
                },
                title = { Text("Scaffold TopBar") }
            )
        }
    ) { paddingValues ->
        Surface(modifier = Modifier.padding(paddingValues)) {
            CheckBoxText(checked, onCheckedChanged = {
                checked = !checked
            }) {
                Text("check box")
            }
        }
    }

}

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