[SwiftUI] ListView에 ListStyle 적용하는 방법

1. DefaultListStyle

List {
    Section {
        Text("DefaultListStyle #1")
        Text("DefaultListStyle #2")
    }
    Section {
        Text("DefaultListStyle #3")
        Text("DefaultListStyle #4")
    }
}
.listStyle(DefaultListStyle())

DefaultListStyle 결과

가장 기본적으로 사용되는 iOS의 목록 스타일입니다. 기본 지정이 해당 리스트 스타일로 됩니다.

 

2. GroupedListStyle

List {
    Section {
        Text("GroupedListStyle #1")
        Text("GroupedListStyle #2")
    }
    Section {
        Text("GroupedListStyle #3")
        Text("GroupedListStyle #4")
    }
}
.listStyle(GroupedListStyle())

GroupedListStyle 결과

여백이 없는 그룹핑 스타일입니다.

 

3. InsetGroupedListStyle

List {
    Section {
        Text("InsetGroupedListStyle #1")
        Text("InsetGroupedListStyle #2")
    }
    Section {
        Text("InsetGroupedListStyle #3")
        Text("InsetGroupedListStyle #4")
    }
}
.listStyle(InsetGroupedListStyle())

InsetGroupedListStyle 결과

내부 여백을 갖는 그룹핑 스타일입니다. 별도의 지정 없는 경우 DefaultListStyle과 동일합니다.

 

4. PlainListStyle

List {
    Section {
        Text("PlainListStyle #1")
        Text("PlainListStyle #2")
    }
    Section {
        Text("PlainListStyle #3")
        Text("PlainListStyle #4")
    }
}
.listStyle(PlainListStyle())

PlainListStyle 결과

스타일이 제거된 기본 리스트 스타일로 내부 여백이 없습니다.

 

5. InsetListStyle

List {
    Section {
        Text("InsetListStyle #1")
        Text("InsetListStyle #2")
    }
    Section {
        Text("InsetListStyle #3")
        Text("InsetListStyle #4")
    }
}
.listStyle(InsetListStyle())

InsetListStyle 결과

스타일이 제거된 기본 리스트 스타일로 내부 여백이 있습니다.

 

6. SidebarListStyle

List {
    Section {
        Text("SidebarListStyle #1")
        Text("SidebarListStyle #2")
    }
    Section {
        Text("SidebarListStyle #3")
        Text("SidebarListStyle #4")
    }
}
.listStyle(SidebarListStyle())

SidebarListStyle 결과

기본적으로 InsetGroupedListStyle과 동일하지만 우측 상단에 토글 버튼을 통하여 리스트를 열고 닫을 수 있습니다.

 

※ 이 글은 워드프레스에 작성한 글과 동일한 작성자의 동일한 글입니다.

https://royfactory.net/2023/07/10/swiftui-liststyle/

[SwiftUI] How to apply “ListStyle” to the List View - ROY FACTORY