[Kotlin][Android] Jetpack Compose 클릭 이벤트 설정하기

 

안녕하세요 오늘은 지난 시간 Jetpack Compose 를 사용해서 만들었던

텍스트 목록에 클릭 이벤트를 추가해보도록 하겠습니다 

 

이전 게시글은 하단 링크에서 확인하실 수 있습니다 

[Kotlin][Android] Jetpack Compose 로 텍스트 목록 만들기

 

 

선택한 아이템에 대해 클릭 이벤트를 설정하기 위해 각 아이템의 인덱스 번호를 담을 변수를 설정해줍니다 

   val index = items.indexOf(item)
   val isSelected = index == selectedIndex

 

 

Box 요소를 추가해줍니다 

   // 클릭 시 선택된 아이템의 ui 상태 변경
            Box (
               modifier = Modifier
                   .fillMaxWidth()
                   .padding(vertical = 8.dp)
                   .background(if (isSelected) Color.LightGray else Color.Transparent)
                   .clickable { selectedIndex = index }
                   .padding(16.dp)
            ) {
                Text(
                    text = item,
                    color = if (isSelected) Color.White else Color.Black
                    )
            }

 

Box 는 클릭 이벤트를 처리하는 요소입니다 

clickable 모디파이어를 추가하여 사용자가 클릭할 수 있게 만들었습니다. 

 

아이템 클릭 시 

배경색은 light gray, 텍스트는 white 색상으로 변경되도록 설정했습니다. 

 

 

위와 같이 짧은 코드 만으로, 클릭 이벤트가 설정되었습니다. 

아래는 전체 코드 입니다 

 

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}"}

    // 선택된 아이템의 인덱스 관리하기
    var selectedIndex by remember { mutableStateOf(-1) }

    // Lazy Column 을 사용하여 스크롤 가능한 목록 생성
    LazyColumn {
        items(items) {
                item ->

            val index = items.indexOf(item)
            val isSelected = index == selectedIndex


            // 클릭 시 선택된 인덱스의 상태 변경
            Box (
               modifier = Modifier
                   .fillMaxWidth()
                   .padding(vertical = 8.dp)
                   .background(if (isSelected) Color.LightGray else Color.Transparent)
                   .clickable { selectedIndex = index }
                   .padding(16.dp)
            ) {
                Text(
                    text = item,
                    color = if (isSelected) Color.White else Color.Black
                    )
            }
        }
    }
}


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

 

 

 

 

시연 영상 입니다