[Kotlin][Android] Jetpack Compose 클릭한 아이템 개수 실시간 업데이트하기

 

안녕하세요 오늘은 지난번 컴포즈를 사용해 체크박스를 만들어보았는데요 

오늘은 체크된 아이템 개수를 동적으로 변경하는 텍스트뷰를 추가해보도록 하겠습니다 

 

안드로이드 컴포즈로 체크 박스 만들기는 아래 링크에서 확인하실 수 있습니다 

https://stickode.tistory.com/1309

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

 

 

목록에서 아이템의 선택 상태가 변경되면

선택된 아이템 개수 변수인 selectedCount 에 업데이트 됩니다 

// 체크 박스 상태 리스트
val selectedItems = remember { mutableStateListOf<Boolean>().apply { repeat(cnt) { add(false) } } }

// 선택된 아이템 개수를 계산
val selectedCount by remember { derivedStateOf { selectedItems.count { it } } }

Column {
    // 1) 선택된 아이템 개수를 표시
    Text(
        text = "선택된 아이템 : $selectedCount",
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        color = Color.Blue
    )

    // 2) 체크박스 리스트 표시
    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 = 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) } } }

    // 선택된 아이템 개수를 계산
    val selectedCount by remember { derivedStateOf { selectedItems.count { it } } }

    Column {
        // 1) 선택된 아이템 개수를 표시
        Text(
            text = "선택된 아이템 : $selectedCount",
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            color = Color.Blue
        )

        // 2) 체크박스 리스트 표시
        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 = 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 {
        ItemList(cnt = 100)
    }
}

 

 

 

시연 영상입니다 

 

 

 

다음시간에는 아이템 목록을 직접 추가하고 삭제해보도록 하겠습니다 

감사합니다