Segmented control

옵션들을 수평으로 나열한 버튼 그룹으로 한 번에 하나의 옵션만 선택합니다. 선택된 항목은 시각적으로 강조 되는 형태의 구조로 같은 콘텐츠 영역 내에서 보기 방식이나 필터를 변경할 때 사용됩니다.

@MainActor struct SegmentedControl

Overview

제한된 옵션 세트 내에서 선택할 수 있도록 하는 가로로 정렬된 버튼 그룹입니다. 각 세그먼트는 이미지와 텍스트를 포함할 수 있으며, 선택된 세그먼트는 시각적으로 강조됩니다.

@State private var selectedIndex = 0

// 텍스트만 있는 세그먼트 컨트롤
SegmentedControl(
    selectedIndex: $selectedIndex,
    labels: ["첫 번째", "두 번째", "세 번째"]
)

// 이미지와 텍스트가 모두 있는 세그먼트 컨트롤
SegmentedControl(
    selectedIndex: $selectedIndex,
    items: [
        .init(image: .icon(.home), title: "홈"),
        .init(image: .icon(.person), title: "프로필"),
        .init(title: "설정")
    ]
)
.variant(.outlined)
.size(.medium)

Topics

Structures

struct Item

세그먼트 컨트롤의 항목을 나타내는 구조체입니다.

Initializers

init(image: Image?, title: String)

세그먼트 항목을 초기화합니다.

  • Parameters
    ParameterDescription
    image표시할 이미지, 생략하면 기본값으로 nil 적용
    title표시할 텍스트

Initializers

init(selectedIndex: Binding<Int>, items: [Item], onSelect: ((Int) -> Void)?)

항목 배열을 이용해 세그먼트 컨트롤을 초기화합니다.

  • Parameters
    ParameterDescription
    selectedIndex현재 선택된 항목의 인덱스 바인딩
    items표시할 항목 배열
    onSelect항목 선택 시 호출될 클로저, 생략하면 기본값으로 nil 적용
init(selectedIndex: Binding<Int>, labels: [String], onSelect: ((Int) -> Void)?)

텍스트 배열을 이용해 세그먼트 컨트롤을 초기화합니다.

  • Parameters
    ParameterDescription
    selectedIndex현재 선택된 항목의 인덱스 바인딩
    labels표시할 텍스트 배열
    onSelect항목 선택 시 호출될 클로저, 생략하면 기본값으로 nil 적용

Instance Properties

var body: some View

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

Instance Methods

func size(Size) -> SegmentedControl

세그먼트 컨트롤의 크기를 설정합니다.

  • Parameters

    ParameterDescription
    size적용할 크기

  • Return Value

    수정된 세그먼트 컨트롤 인스턴스

func variant(Variant) -> SegmentedControl

세그먼트 컨트롤의 시각적 스타일을 설정합니다.

  • Parameters

    ParameterDescription
    variant적용할 스타일

  • Return Value

    수정된 세그먼트 컨트롤 인스턴스

Enumerations

enum Size

세그먼트 컨트롤의 크기를 정의하는 열거형입니다.

Enumeration Cases

case large

큰 크기

case medium

중간 크기

case small

작은 크기

enum Variant

세그먼트 컨트롤의 시각적 스타일을 정의하는 열거형입니다.

Enumeration Cases

case outlined

테두리만 있는 스타일

case solid

배경이 채워진 스타일

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.