SwiftUI Listのグループ化スタイル iOS14対応

概要

iOS13、iOS14でグループ化リストを表示する際のTipsです。

SwiftUIでグループ化されたListを表示

iOS13の**GroupedListStyle()と、iOS14で追加されたInsetGroupedListStyle()**を切り分けて設定していきます。

iOS13

SwiftUIでグループ化されたテーブルを表示する場合、iOS13では

List {
    Text("List Item 1")
    Text("List Item 2")
    Text("List Item 3")
}.listStyle(GroupedListStyle())

としていました。

iOS14

iOS14では、**InsetGroupedListStyle()**を使用して

List {
    Text("List Item 1")
    Text("List Item 2")
    Text("List Item 3")
}
.listStyle(InsetGroupedListStyle())

とします。

iOS13/iOS14 両方対応

使い易いようにViewを拡張して

extension View {
    func iOS14Coordinator_ListStyle() -> some View {
        Group{
            if #available(iOS 14, *) {
                self
                    .listStyle(InsetGroupedListStyle())
            }else{
                self
                    .listStyle(GroupedListStyle())
            }
      }
    }
}

以下のように使います。

List {
    Text("List Item 1")
    Text("List Item 2")
    Text("List Item 3")
}
.iOS14Coordinator_ListStyle()

---

https://developer.apple.com/documentation/swiftui/insetgroupedliststyle
https://developer.apple.com/documentation/swiftui/groupedliststyle