[Jetpack Compose] Compose의 문법 (2)

해당 게시물은 과거에 작성한 블로그 내용을 옮겨 온 것으로, 가독성이 떨어지고 내용이 부정확할 수 있습니다.

Surface

• Composable을 중심으로 객체를 래핑
• 도형을 선언할 때 도형과 높이의 맞춤 설정 가능

Surface(
                // 생략
            ) {
                Text(
                    text = msg.body,
                    modifier = Modifier.padding(all = 4.dp),
                    // 메시지가 확장되면 모든 내용을 보여줌
                    // 확장되지 않으면 첫 줄만 보여줌
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    style = MaterialTheme.typography.body2
                )
            }

LazyColumn() & LazyRow()

• 현재 표시되는 항목만 작성하고 배치하는 목록
• XML의 ListView, RecyclerView 역할
  • LazyColumn: 세로 ScrollView
  • LazyRow: 가로 ScrollView

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

@Preview
@Composable
fun PreviewConversation() {
    ComposeTutorialTheme {
        Conversation(SampleData.conversationSample)
    }
}

remember API

• 이전의 값을 기억
• 메모리에 객체를 저장
• remember에 의해 계산된 값은 초기 Composition 중에 Composition에 저장
  • 저장된 값은 Recomposition 시 반환
• 변경 가능한 객체 뿐 아니라 변경 불가한 객체를 저장하는 데에도 사용 가능
• remember를 호출한 Composable이 Composition에서 삭제되면 해당 객체를 잊음

var isExpanded by remember { mutableStateOf(false) }

mutableStateOf

• Mutablestate 생성
  • 런타임 시 Compose에 통합되는 관찰 가능 유형
  • MutableState 객체 선언 방법 세 가지

1. val mutableState = remember { mutableStateOf(default) }
2. var value by remember { mutableStateOf(default) }
3. val (value, setValue) = remember { mutableStateOf(default) }