[Compose] Scaffold

Scaffold란?

• Scaffold는 Jetpack Compose에서 앱의 기본 레이아웃 구조를 구성하기 위한 컨테이너입니다. 전통적인 Android의 CoordinatorLayout이나 FrameLayout과 비슷한 역할을 하지만, 선언형 UI 패턴에 맞게 설계되었습니다.
• 슬롯(Slot) 기반 구성: topBar, bottomBar, drawer, content 등 레이아웃 영역을 정의하고 Composable로 채워넣을 수 있음.
• 기본적인 UI 컴포넌트 통합 지원
  • Top App Bar
  • Bottom Navigation
  • Floating Action Button (FAB)
  • Drawer 등
    

Scaffold에 topBar를 TopAppBar로 채워보자

    Scaffold(topBar = {
        TopAppBar(
            navigationIcon = {
                IconButton(onClick = { /*TODO*/ }) {
                    Image(imageVector = Icons.Filled.ArrowBack, contentDescription = "뒤로가기")
                }
            },
            title = {
                Text(text = "일단 채워")
            }
        )
    }) {

    }

Scaffold에 slot API를 채워보자

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

}


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

    }

}

@Composable
fun ScaffoldEx() {
    var checked by remember {
        mutableStateOf(false)
    }
    Scaffold(topBar = {
        TopAppBar(
            navigationIcon = {
                IconButton(onClick = { /*TODO*/ }) {
                    Image(imageVector = Icons.Filled.ArrowBack, contentDescription = "뒤로가기")
                }
            },
            title = {
                Text(text = "일단 채워")
            }
        )
    }) {
        Scaffold(modifier = Modifier.padding(8.dp)) {
            CheckBoxWithContent(checked = checked, toggleState = { checked = !checked }) {
                Text(text = "채웠습니다")
            }
        }
    }
}


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