[Kotlin][Android] Jetpack Compose 목록에 텍스트 아이템 추가, 삭제하기

 

 

안녕하세요 이번 시간에는 안드로이드 컴포즈를 사용하여

텍스트로 구성된 아이템 목록에 새로운 텍스트 아이템을 추가하고, 삭제하는 기능을 간단하게 만들어보도록 하겠습니다 

 

 

이전 게시글인 체크 박스 만들기는 아래 링크를 참고해주세요 

 

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

 

 

 

먼저 새로운 아이템을 추가할 텍스트 입력칸을 만들어줍니다 

// 새로운 아이템 추가 입력 필드
Row(modifier = Modifier.padding(16.dp)) {
    TextField(
        value = newItemText,
        onValueChange = { newItemText = it },
        label = { Text("새 아이템 입력") },
        modifier = Modifier.weight(1f)
    )
    Spacer(modifier = Modifier.width(8.dp))
    Button(onClick = {
        if (newItemText.isNotBlank()) {
            items.add(newItemText)
            selectedItems.add(false) // 새로운 아이템에 대해 체크박스 상태 추가
            newItemText = "" // 입력 필드 초기화
        }
    }) {
        Text("추가")
    }
}

 

 

X 삭제 버튼을 오른쪽으로 정렬하고 클릭 시 아이템이 삭제 되도록 해줍니다 

Spacer(modifier = Modifier.weight(1f)) // X 표시를 오른쪽으로 정렬하기 위한 spacer
IconButton(onClick = {
    // 아이템 삭제
    items.removeAt(index)
    selectedItems.removeAt(index) // 삭제 시 체크박스 상태도 함께 제거
}) {
    Icon(
        imageVector = Icons.Default.Close,
        contentDescription = "삭제",
        tint = Color.Red
    )
}

 

 

 

전체 코드입니다

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Kotlin_exampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ItemList(cnt = 3)
                }
            }
        }
    }
}

// item list
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ItemList(cnt: Int) {
    // 아이템 리스트 초기화
    val items = remember { mutableStateListOf<String>().apply { repeat(cnt) { add("Item ${it + 1}") } } }

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

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

    // 새로운 아이템 입력 상태
    var newItemText by remember { mutableStateOf("") }

    Column {
        // 새로운 아이템 추가 입력 필드
        Row(modifier = Modifier.padding(16.dp)) {
            TextField(
                value = newItemText,
                onValueChange = { newItemText = it },
                label = { Text("새 아이템 입력") },
                modifier = Modifier.weight(1f)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Button(onClick = {
                if (newItemText.isNotBlank()) {
                    items.add(newItemText)
                    selectedItems.add(false) // 새로운 아이템에 대해 체크박스 상태 추가
                    newItemText = "" // 입력 필드 초기화
                }
            }) {
                Text("추가")
            }
        }

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

        // 체크박스 리스트 표시
        LazyColumn {
            items(items.size) { index ->
                val item = items[index]
                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)
                    )

                    Spacer(modifier = Modifier.weight(1f)) // X 표시를 오른쪽으로 정렬하기 위한 spacer
                    IconButton(onClick = {
                        // 아이템 삭제
                        items.removeAt(index)
                        selectedItems.removeAt(index) // 삭제 시 체크박스 상태도 함께 제거
                    }) {
                        Icon(
                            imageVector = Icons.Default.Close,
                            contentDescription = "삭제",
                            tint = Color.Red
                        )
                    }
                }
            }
        }
    }
}

 

 

 

시연 영상입니다 

 

 

 

 

감사합니다 !