【SwiftUI】Listのスタイル

# iOS
## automatic
![simulator_screenshot_C5D7D91E-5802-47A4-9A9B-D5B2FE0EB9AC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/8cd34c59-66cc-3306-1af9-b085be57dca3.png)

```swift
struct automatic: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.automatic)
        .navigationTitle("automatic")
    }
}
```

## grouped
![simulator_screenshot_AFD5EC42-E46E-4A90-BC79-33C216CFD1E7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/00f21919-dce6-e404-b99b-398fd8246d88.png)
```swift
struct grouped: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.grouped)
        .navigationTitle("grouped")
    }
}
```

## inset
![simulator_screenshot_168630A5-B21E-4493-B02E-B726544E810F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/292a8e5a-6286-9d35-b92f-aef19e4c182a.png)
```swift
struct inset: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.inset)
        .navigationTitle("inset")
    }
}
```

## insetGrouped
![simulator_screenshot_187B4227-2D7A-43A1-80CB-5BAE0FC9A79D.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/184dd943-7af8-7409-1527-81a63324775b.png)
```swift
struct insetGrouped: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.insetGrouped)
        .navigationTitle("insetGrouped")
    }
}
```

## plain
![simulator_screenshot_37EA2072-A682-40D8-B11C-F177D1C16AD2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5e4a8d58-8566-7afe-73fd-3c1082fb60d8.png)
```swift
struct plain: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.plain)
        .navigationTitle("plain")
    }
}
```

## sidebar
![simulator_screenshot_CA7CD4CC-F91B-40B5-AF78-F74B8E59273D.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ed4f85cd-75ad-d380-9bc5-6acbc9433e4a.png)
```swift
struct sidebar: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.sidebar)
        .navigationTitle("sidebar")
    }
}
```

# macOS
## automatic
![スクリーンショット 2022-06-08 18.57.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/9b61de05-c4f0-71fa-95ff-13a63e9eb0ca.png)
```swift
struct automatic: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.automatic)
        .navigationTitle("automatic")
    }
}
```

## bordered
![スクリーンショット 2022-06-08 18.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5e5ff1c9-efb5-5f56-6243-05d438cfc677.png)
```swift
struct bordered: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.bordered)
        .navigationTitle("bordered")
    }
}
```

## inset
![スクリーンショット 2022-06-08 18.57.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/c1a10cca-fc52-15dd-d2c8-16b184c91f9a.png)
```swift
struct inset: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.inset)
        .navigationTitle("inset")
    }
}
```

## plain
![スクリーンショット 2022-06-08 18.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/c91ecd9c-34ec-3354-8865-6e7bf9951068.png)
```swift
struct plain: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.plain)
        .navigationTitle("plain")
    }
}
```

## sidebar
![スクリーンショット 2022-06-08 18.58.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/7116ed27-771a-fca0-a538-1b67b10e5d0d.png)
```swift
struct sidebar: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.sidebar)
        .navigationTitle("sidebar")
    }
}
```