List cell

콘텐츠를 하나의 리스트 단위로 표현하는 요소로, 이미지, 텍스트, 인터랙션 요소 등을 유연하게 조합하여 구성할 수 있습니다. 일관되고 정돈된 형태로 정보를 탐색할 수 있도록 돕습니다.

@MainActor struct ListCell

Overview

ListCell은 앱 내에서 리스트 형태로 정보를 표시할 때 사용되는 기본 컴포넌트입니다. 타이틀, 부가 설명, 좌측 콘텐츠, 우측 콘텐츠 등을 포함할 수 있으며 다양한 스타일로 커스터마이징할 수 있습니다.

// 기본 셀
ListCell(title: "기본 셀")

// 추가 설명이 있는 셀
ListCell(title: "설명이 있는 셀")
    .caption("부가 설명 텍스트")

// 리딩 콘텐츠와 선택 상태의 셀
ListCell(title: "커스텀 셀", onTap: {
    print("셀이 탭되었습니다")
})
.leadingContent {
    Image.icon(.person)
        .frame(width: 24, height: 24)
}
.selected(true)
.chevron(true)

Topics

Initializers

init(title: String, onTap: (() -> Void)?)

셀 컴포넌트를 초기화합니다.

  • Parameters
    ParameterDescription
    title셀에 표시할 제목 텍스트
    onTap셀을 탭했을 때 실행할 클로저, 생략하면 기본값으로 nil 적용

Instance Properties

var body: some View

뷰의 내용과 동작을 정의합니다.

Instance Methods

func caption(String?) -> ListCell

셀에 부가 설명(캡션)을 추가합니다.

  • Parameters

    ParameterDescription
    caption표시할 캡션 텍스트, 생략하면 기본값으로 nil 적용 (nil 설정 시 캡션 제거)

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    캡션은 타이틀 아래에 작은 글씨로 표시되는 부가 설명 텍스트입니다.

func chevron(Bool) -> ListCell

셀 우측에 화살표(chevron) 아이콘을 추가합니다.

  • Parameters

    ParameterDescription
    chevron화살표 표시 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    주로 탭했을 때 다른 화면으로 이동하는 셀에 사용됩니다.

func disable(Bool) -> ListCell

셀의 비활성화 상태를 설정합니다.

  • Parameters

    ParameterDescription
    disable비활성화 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    비활성화된 셀은 탭 이벤트를 받지 않으며, 시각적으로 흐리게 표시됩니다.

func divider(Bool) -> ListCell

셀 하단에 구분선을 추가합니다.

  • Parameters

    ParameterDescription
    divider구분선 표시 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 ListCell 인스턴스

func fillWidth(Bool) -> ListCell

셀의 좌우 여백 사용 여부를 설정합니다.

  • Parameters

    ParameterDescription
    fillWidth좌우 여백 적용 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    Note

    true로 설정하면 셀 내부에 좌우 20포인트의 여백이 적용되고 인터랙션 영역이 각진 모서리 사각형 모양의 셀 내부 영역으로 한정되며, false로 설정하면 셀 내부 여백이 없는 대신 인터랙션 영역이 둥근 모서리 사각형 모양으로 셀 영역 바깥까지 적용됩니다.

func highlight(String) -> ListCell

타이틀의 특정 텍스트를 강조 표시합니다.

  • Parameters

    ParameterDescription
    text강조할 텍스트 문자열

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    지정한 문자열과 일치하는 부분을 굵은 글씨(bold)로 강조 표시합니다. 대소문자를 구분하지 않으며, 첫 번째로 일치하는 부분만 강조됩니다.

func interactionPadding(CGFloat) -> ListCell

셀의 인터랙션 효과 영역의 좌우 패딩을 조정합니다.

  • Parameters

    ParameterDescription
    padding적용할 패딩 값 (포인트 단위)

  • Return Value

    수정된 ListCell 인스턴스

func leadingContent<V>(() -> V) -> ListCell

셀 좌측에 추가 콘텐츠를 표시합니다.

  • Parameters

    ParameterDescription
    contents표시할 콘텐츠를 생성하는 클로저

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    아이콘, 이미지, 기타 커스텀 뷰 등을 셀 타이틀 앞에 배치할 수 있습니다.

func selected(Bool) -> ListCell

셀을 선택된 상태로 설정합니다.

  • Parameters

    ParameterDescription
    selected선택 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    선택된 셀은 타이틀 텍스트의 색상이 primaryNormal로 변경되고, 텍스트 두께가 medium으로 설정됩니다. trailingContent 클로저의 파라미터로 선택된 상태 여부가 전달됩니다.

func textEllipsis(Bool) -> ListCell

타이틀 텍스트의 생략 처리 여부를 설정합니다.

  • Parameters

    ParameterDescription
    textEllipsis텍스트 생략 처리 여부, 생략하면 기본값으로 true 적용

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    true로 설정하면 타이틀 텍스트가 2줄로 제한되고, 초과 텍스트는 생략됩니다.

    Note

    false인 경우 좌우 콘텐츠는 상단 정렬됩니다.

func titleColor(Color.Semantic) -> ListCell

타이틀 텍스트의 color 속성을 조정합니다.

  • Parameters

    ParameterDescription
    color적용할 텍스트 색상

  • Return Value

    수정된 ListCell 인스턴스

func titleVariant(Typography.Variant) -> ListCell

타이틀 텍스트의 variant 속성을 조정합니다.

  • Parameters

    ParameterDescription
    variant적용할 Typography 변형 스타일

  • Return Value

    수정된 ListCell 인스턴스

func titleWeight(Typography.Weight) -> ListCell

타이틀 텍스트의 weight 속성을 조정합니다.

  • Parameters

    ParameterDescription
    weight적용할 텍스트 두께

  • Return Value

    수정된 ListCell 인스턴스

func trailingContent<V>((Bool) -> V) -> ListCell

셀 우측에 추가 콘텐츠를 표시합니다.

  • Parameters

    ParameterDescription
    contents표시할 콘텐츠를 생성하는 클로저 (선택된 상태를 파라미터로 받음)

  • Return Value

    수정된 ListCell 인스턴스

  • Discussion

    배지, 스위치, 토글 등 추가 UI 요소를 셀 타이틀 뒤에 배치할 수 있습니다. 클로저 파라미터를 통해 셀의 선택된 상태를 전달받을 수 있습니다.

func verticalAlign(VerticalAlignment) -> ListCell

셀 내 콘텐츠의 수직 정렬을 조정합니다.

  • Parameters

    ParameterDescription
    verticalAlignment적용할 수직 정렬 방식

  • Return Value

    수정된 ListCell 인스턴스

func verticalPadding(VerticalPadding) -> ListCell

상하 여백의 크기를 조정합니다.

  • Parameters

    ParameterDescription
    verticalPadding적용할 상하 여백 크기

  • Return Value

    수정된 ListCell 인스턴스

Enumerations

enum VerticalPadding

상하 여백을 나타내는 열거형입니다.

Enumeration Cases

case large

큰 여백

case medium

중간 여백

case none

여백 없음

case small

작은 여백

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.