Compose에서의 상태

열과 행 만들기

상호작용을 추가를 위해 앞서 진행한 내용을 토대로 진행하려고 한다

 

Button의 상태를 저장 및 추적하기 위해 코드를 수정

• expanded라는 값을 Compose에서 추적하기 위해서는 mutableStateOf 함수를 사용해야 한다
• 그리고 그 상태를 기억하기 위해서는 remember를 사용해야 한다

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val expanded = remember { mutableStateOf(false) } // expanded 값 추가

    Surface(
        ...)) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
               ...
            }
            ElevatedButton(onClick = { expanded.value = !expanded.value }) { // 상태변화에 따른 행동 설정
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }
}

 

 

추가 변수를 추가해 항목 펼치기 만들기

• extraPadding 변수를 추가하여 Column의 padding이 가변되도록 수정

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val expanded = remember { mutableStateOf(false) }
    val extraPadding = if (expanded.value) 48.dp else 0.dp // 추가 변수

    Surface(
        color = MaterialTheme.colorScheme.primary, 
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)) { // extraPadding 적용

        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f).padding(bottom = extraPadding)) {
                ...
            }
            ElevatedButton(onClick = { expanded.value = !expanded.value }) {
                ...
            }
        }
    }
}