카드

Card 컴포저블은 UI의 Material Design 컨테이너 역할을 합니다. 카드는 일반적으로 일관된 단일 콘텐츠를 표시합니다. 다음은 카드를 사용할 수 있는 경우의 예는 다음과 같습니다.

  • 쇼핑 앱의 제품
  • 뉴스 앱의 뉴스 기사
  • 커뮤니케이션 앱의 메시지

Card를 다른 컨테이너와 구별하는 단일 콘텐츠를 묘사하는 데 중점을 둡니다. 예를 들어 Scaffold는 전체 화면에 일반적인 구조를 제공합니다. 카드는 일반적으로 큰 화면 안에 있는 작은 UI 요소입니다. 반면 Column 또는 Row과 같은 레이아웃 구성요소는 더 단순한 레이아웃을 제공합니다. 보다 일반적인 API를 제공합니다.

텍스트와 아이콘으로 채워진 돌출 카드
그림 1. 텍스트와 아이콘으로 채워진 카드의 예

기본 구현

Card는 Compose의 다른 컨테이너와 매우 유사하게 동작합니다. 사용자는 그 안에서 다른 컴포저블을 호출하는 것도 좋습니다. 예를 들어 Card가 Text 호출을 반복해야 합니다.

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

고급 구현

Card의 API 정의는 참조를 확인하세요. Kubernetes는 매개변수의 모양과 동작을 맞춤설정할 수 있는 구성요소를 사용합니다.

몇 가지 주요 매개변수는 다음과 같습니다.

  • elevation: 구성요소에 그림자를 추가하여 표시합니다. 볼 수 있습니다.
  • colors: CardColors 유형을 사용하여 둘 다의 기본 색상을 설정합니다. 컨테이너와 모든 하위 요소가 포함됩니다
  • enabled: 이 매개변수에 false를 전달하면 카드가 다음과 같이 표시됩니다. 사용자 입력에 응답하지 않습니다.
  • onClick: 일반적으로 Card는 클릭 이벤트를 허용하지 않습니다. 따라서 주목해야 할 기본 오버로드는 onClick 매개변수 이 오버로드를 사용하여 사용자의 누름에 응답하는 Card의 구현.

다음 예에서는 이러한 매개변수를 사용하는 방법과 shape 및 modifier와 같은 다른 일반적인 매개변수로 사용할 수 있습니다.

채워진 카드

다음은 채워진 카드를 구현하는 방법을 보여주는 예입니다.

여기서 핵심은 colors 속성을 사용하여 채워진 color입니다.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

이 구현은 다음과 같이 표시됩니다.

카드는 머티리얼 테마의 노출 영역 변형 색상으로 채워집니다.
그림 2. 채워진 카드의 예

승격된 카드

다음 스니펫은 승격된 카드를 구현하는 방법을 보여줍니다. 전용 ElevatedCard 컴포저블을 사용합니다.

elevation 속성을 사용하여 고도의 모양을 제어하고 결과로 나타납니다.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

이 구현은 다음과 같이 표시됩니다.

그림자와 함께 카드가 앱의 배경 위에 놓여 있습니다.
그림 3. 승격된 카드의 예

윤곽선이 있는 카드

다음은 윤곽선이 표시된 카드의 예입니다. OutlinedCard 컴포저블 함수.

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

이 구현은 다음과 같이 표시됩니다.

카드에 검은색 가는 테두리가 표시됩니다.
그림 4. 윤곽선이 표시된 카드의 예

제한사항

카드에는 고유한 스크롤 또는 닫기 작업이 제공되지 않지만 이러한 기능을 제공하는 컴포저블을 살펴보겠습니다. 예를 들어 스와이프하여 닫기를 구현하려면 SwipeToDismiss 컴포저블과 통합합니다. 스크롤과 통합하려면 verticalScroll와 같은 스크롤 수정자를 사용하세요. 자세한 내용은 문서를 참조하세요.

추가 리소스