List cell
콘텐츠를 하나의 리스트 단위로 표현하는 요소로, 이미지, 텍스트, 인터랙션 요소 등을 유연하게 조합하여 구성할 수 있습니다. 일관되고 정돈된 형태로 정보를 탐색할 수 있도록 돕습니다.
텍스트와 캡션, 아이콘 등의 요소를 조합하여 하나의 Cell 형태로 표현하는 컴포넌트입니다.
String 기반 텍스트 입력을 받아 내부적으로 AnnotatedString 변환 후 처리합니다.
아이콘, 캡션, 클릭 이벤트, 구분선 등 다양한 UI 옵션을 제공합니다.
WantedListCell(
text = "텍스트",
caption = "캡션",
fillWidth = true,
onClick = { }
)
| 이름 | 타입 | 설명 |
|---|
text | String | 셀에 표시할 메인 텍스트입니다. |
modifier | Modifier | 셀 외형, 배치, 패딩 등을 조정합니다. |
textMaxLine | Int | 텍스트 최대 줄 수를 지정합니다. 기본값은 1입니다. |
caption | String | 서브 텍스트(캡션)로 보조 정보를 제공합니다. |
fillWidth | Boolean | true일 경우 셀이 부모 너비를 가득 채웁니다. |
verticalPadding | WantedListCellDefaults.VerticalPadding | 셀 상하 패딩 크기를 조정합니다. |
interactionPadding | WantedListCellDefaults.InteractionPadding | 터치 영역의 좌우 여백을 지정합니다. |
divider | Boolean | true일 경우 셀 하단에 구분선을 표시합니다. |
isEnable | Boolean | 셀의 활성화 여부를 설정합니다. 비활성화 시 알파값이 줄어듭니다. |
selected | Boolean | true일 경우 메인 텍스트 색상을 primary로 강조 표시합니다. |
ellipsis | Boolean | true일 경우 텍스트가 넘칠 시 생략 부호(...)로 표시됩니다. |
verticalAlignCenter | Boolean | true일 경우 텍스트를 수직 중앙 정렬합니다. |
chevrons | Boolean | true일 경우 우측에 chevron 아이콘을 표시합니다. |
leadingContent | (@Composable () -> Unit)? | 좌측에 추가적인 컴포넌트 콘텐츠를 배치할 수 있습니다. |
trailingContent | (@Composable () -> Unit)? | 우측에 추가적인 컴포넌트 콘텐츠를 배치할 수 있습니다. |
onClick | (() -> Unit)? | 셀 클릭 시 호출되는 콜백 함수입니다. |
AnnotatedString 기반 텍스트와 서브 텍스트를 활용하는 Cell 컴포넌트입니다.
보통 내부에서 String 기반 WantedListCell 함수로부터 호출되며, 텍스트 스타일과 Annotation을 직접 다룰 수 있는 고급 인터페이스입니다.
WantedListCell(
annotatedString = AnnotatedString("텍스트"),
annotatedCaption = AnnotatedString("캡션"),
onClick = { }
)
Parameters
| 이름 | 타입 | 설명 |
|---|
annotatedString | AnnotatedString | 표시할 메인 텍스트입니다. |
modifier | Modifier | 셀 외형, 배치, 패딩 등을 조정합니다. |
annotatedCaption | AnnotatedString | 서브 텍스트(캡션)입니다. |
fillWidth | Boolean | true일 경우 셀이 부모 너비를 가득 채웁니다. |
verticalPadding | WantedListCellDefaults.VerticalPadding | 셀 상하 패딩 크기를 조정합니다. |
interactionPadding | WantedListCellDefaults.InteractionPadding | 터치 영역의 좌우 여백을 지정합니다. |
divider | Boolean | true일 경우 셀 하단에 구분선을 표시합니다. |
isEnable | Boolean | 셀의 활성화 여부를 설정합니다. |
selected | Boolean | true일 경우 텍스트 색상을 primary로 강조합니다. |
ellipsis | Boolean | true일 경우 텍스트가 넘칠 시 생략 부호(...)로 표시됩니다. |
verticalAlignCenter | Boolean | true일 경우 텍스트를 수직 중앙 정렬합니다. |
chevrons | Boolean | true일 경우 우측에 chevron 아이콘을 표시합니다. |
textMaxLine | Int | 텍스트 최대 줄 수를 지정합니다. 기본값은 1입니다. |
titleStyle | TextStyle? | 메인 텍스트의 커스텀 스타일을 설정할 수 있습니다. |
captionStyle | TextStyle? | 캡션 텍스트의 커스텀 스타일을 설정할 수 있습니다. |
leadingContent | (@Composable () -> Unit)? | 좌측에 추가적인 컴포넌트 콘텐츠를 배치할 수 있습니다. |
trailingContent | (@Composable () -> Unit)? | 우측에 추가적인 컴포넌트 콘텐츠를 배치할 수 있습니다. |
onClick | (() -> Unit)? | 셀 클릭 시 호출되는 콜백 함수입니다. |
WantedListCell 컴포넌트에 사용되는 수직 패딩 및 인터랙션 패딩 관련 설정을 정의하는 객체입니다.
| 값 | 설명 |
|---|
None | 패딩 없음 (0dp)입니다. |
Small | 8dp 패딩입니다. |
Medium | 12dp 패딩입니다. |
Large | 16dp 패딩입니다. |
Cell 내부의 상호작용 요소(e.g. 클릭 영역)에 적용되는 패딩 값을 정의합는 sealed 클래스입니다.
- Default: fillWidth 옵션에 따라 12dp 또는 20dp를 적용합니다.
- Custom: 개발자가 직접 패딩 값을 지정할 수 있습니다.
| 값 | 설명 |
|---|
Default | fillWidth 값에 따라 기본 패딩을 지정합니다. |
Custom | 개발자가 원하는 패딩 값을 직접 설정할 수 있습니다. |
Properties
| 이름 | 타입 | 설명 |
|---|
padding | Dp | 상호작용 영역에 적용되는 패딩 값입니다. |