[Kotlin][Android] Jetpack Compose 체크 박스 만들기

 

안녕하세요 오늘은 Jetpack Compose 를 사용하여 목록 아이템에 체크 박스를 추가해보도록 하겠습니다 

 

LazyColumn 는 간편하게 목록을 만들 수 있는 Jetpack Compose 의 구성 요소 중 하나 입니다

기존 리사이클러뷰와 같은 기능을 훨씬 간편하게 구현할 수 있습니다 ! 

 

LazyColumn에 있는 아이템 마다 체크 박스를 만들어주기 위해 Check box 를 추가해줍니다 

    LazyColumn {
        items(items) { item ->
            val index = items.indexOf(item)

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp)
                    .clickable {
                        selectedItems[index] = !selectedItems[index] // 체크박스 상태 토글
                    }
                    .padding(16.dp),
                verticalAlignment = androidx.compose.ui.Alignment.CenterVertically // 세로 정렬
            ) {
                Checkbox(
                    checked = selectedItems[index],
                    onCheckedChange = { checked -> selectedItems[index] = checked }
                )
                Text(
                    text = item,
                    color = Color.Black,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }

 

 

아래는 전체 코드 입니다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Kotlin_exampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ItemList(cnt = 100)
                }
            }
        }
    }
}


// item list
@Composable
fun ItemList (cnt : Int) {
    val items = List (cnt) { "Item ${it + 1}"}

    // 아이템 체크 박스 변수
    val selectedItems = remember { mutableStateListOf<Boolean>().apply { repeat(cnt) { add(false) } } }

    //아이템 체크 박스
    LazyColumn {
        items(items) { item ->
            val index = items.indexOf(item)

            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp)
                    .clickable {
                        selectedItems[index] = !selectedItems[index] // 체크박스 상태 토글
                    }
                    .padding(16.dp),
                verticalAlignment = androidx.compose.ui.Alignment.CenterVertically // 세로 정렬
            ) {
                Checkbox(
                    checked = selectedItems[index],
                    onCheckedChange = { checked -> selectedItems[index] = checked }
                )
                Text(
                    text = item,
                    color = Color.Black,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }

}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Kotlin_exampleTheme {
//        Greeting("Android")
        ItemList(cnt = 100)
    }
}