Card
컴포저블은 UI의 Material Design 컨테이너 역할을 합니다.
카드는 일반적으로 하나의 일관된 콘텐츠를 표시합니다. 다음은
카드를 사용할 수 있는 경우의 예는 다음과 같습니다.
- 쇼핑 앱의 제품
- 뉴스 앱의 뉴스 기사
- 커뮤니케이션 앱의 메시지
하나의 콘텐츠를 묘사하는 데 초점을 맞추고 있고
다른 컨테이너에서의 Card
입니다. 예를 들어 Scaffold
는 일반적인 구조를 제공합니다.
전체 화면으로 확대합니다. 카드는 일반적으로 큰 화면 안에 있는 작은 UI 요소입니다.
Column
또는 Row
와 같은 레이아웃 구성요소는 더 단순한 레이아웃을 제공합니다.
보다 일반적인 API를 제공합니다.
기본 구현
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, ) } }
이 구현은 다음과 같이 표시됩니다.
![카드는 머티리얼 테마의 노출 영역 변형 색상으로 채워집니다.](https://developer.android.com/static/develop/ui/compose/images/components/card-filled.png?authuser=4&hl=ko)
승격된 카드
다음 스니펫은 승격된 카드를 구현하는 방법을 보여줍니다. 사용
전용 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, ) } }
이 구현은 다음과 같이 표시됩니다.
![그림자와 함께 카드가 앱의 배경 위에 놓여 있습니다.](https://developer.android.com/static/develop/ui/compose/images/components/card-elevated.png?authuser=4&hl=ko)
윤곽선이 있는 카드
다음은 윤곽선이 표시된 카드의 예입니다.
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, ) } }
이 구현은 다음과 같이 표시됩니다.
![카드에 얇은 검은색 테두리의 윤곽선이 표시되어 있습니다.](https://developer.android.com/static/develop/ui/compose/images/components/card-outlined.png?authuser=4&hl=ko)
제한사항
카드에는 고유한 스크롤 또는 닫기 작업이 제공되지 않지만
이러한 기능을 제공하는 컴포저블을 살펴보겠습니다. 예를 들어 스와이프하여 닫기를 구현하려면
SwipeToDismiss
컴포저블과 통합합니다. 통합하려면
verticalScroll
와 같은 스크롤 수정자를 사용합니다. 자세한 내용은
문서를 참조하세요.