【SwiftUI】Pickerのスタイル

# iOS
## automatic
**リスト内**
![Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.32.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/01b53bb0-9939-0ae7-731a-a6b1b9da3e95.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        Form {
            Section {
                Picker("ひらがな", selection: $pickerIndex) {
                    Text("あいうえお").tag(0)
                    Text("かきくけこ").tag(1)
                    Text("さしすせそ").tag(2)
                    Text("たちつてと").tag(3)
                    Text("なにぬねの").tag(4)
                }
                .pickerStyle(.automatic)
            }
        }
    }
}
```
**リスト外**
![Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.33.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5bb8a3c6-827f-b223-b260-34aed23ce18c.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        Picker("ひらがな", selection: $pickerIndex) {
            Text("あいうえお").tag(0)
            Text("かきくけこ").tag(1)
            Text("さしすせそ").tag(2)
            Text("たちつてと").tag(3)
            Text("なにぬねの").tag(4)
        }
        .pickerStyle(.automatic)
    }
}
```
:::note warn
注意
Pickerを配置する場所によってスタイルが変動
:::

## inline
![Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.34.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/7d1fb8d8-4b7d-b203-ff14-8146fbf5f91e.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        Form {
            Section {
                Picker("ひらがな", selection: $pickerIndex) {
                    Text("あいうえお").tag(0)
                    Text("かきくけこ").tag(1)
                    Text("さしすせそ").tag(2)
                    Text("たちつてと").tag(3)
                    Text("なにぬねの").tag(4)
                }
                .pickerStyle(.inline)
            }
        }
    }
}
```

## menu
![Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.35.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e84d2429-0aa7-3a09-ab7e-e9ab90d28cc2.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        Form {
            Section {
                Picker("ひらがな", selection: $pickerIndex) {
                    Text("あいうえお").tag(0)
                    Text("かきくけこ").tag(1)
                    Text("さしすせそ").tag(2)
                    Text("たちつてと").tag(3)
                    Text("なにぬねの").tag(4)
                }
                .pickerStyle(.menu)
            }
        }
    }
}
```

## segmented
![Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.36.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a38d719f-ff28-1e74-feea-5fb48cf05d14.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        Form {
            Section {
                Picker("ひらがな", selection: $pickerIndex) {
                    Text("あいうえお").tag(0)
                    Text("かきくけこ").tag(1)
                    Text("さしすせそ").tag(2)
                    Text("たちつてと").tag(3)
                    Text("なにぬねの").tag(4)
                }
                .pickerStyle(.segmented)
            }
        }
    }
}
```

## wheel
![Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6c24e6d2-bc11-505b-2dbe-04f144a5cae1.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        Form {
            Section {
                Picker("ひらがな", selection: $pickerIndex) {
                    Text("あいうえお").tag(0)
                    Text("かきくけこ").tag(1)
                    Text("さしすせそ").tag(2)
                    Text("たちつてと").tag(3)
                    Text("なにぬねの").tag(4)
                }
                .pickerStyle(.wheel)
            }
        }
    }
}
```

# macOS
## automatic
![スクリーンショット 2022-06-09 12.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4b7734f9-f5f8-a968-0854-0cc0b81dec58.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        VStack {
            Picker("ひらがな", selection: $pickerIndex) {
                Text("あいうえお").tag(0)
                Text("かきくけこ").tag(1)
                Text("さしすせそ").tag(2)
                Text("たちつてと").tag(3)
                Text("なにぬねの").tag(4)
            }
            .pickerStyle(.automatic)
            .frame(width: 300, height: 100)
        }
        .frame(width: 600, height: 400)
    }
}
```

## inline
![スクリーンショット 2022-06-09 12.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/d6cc22e5-1161-238b-d8cc-0c4b27620d82.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        VStack {
            Picker("ひらがな", selection: $pickerIndex) {
                Text("あいうえお").tag(0)
                Text("かきくけこ").tag(1)
                Text("さしすせそ").tag(2)
                Text("たちつてと").tag(3)
                Text("なにぬねの").tag(4)
            }
            .pickerStyle(.inline)
            .frame(width: 300, height: 100)
        }
        .frame(width: 600, height: 400)
    }
}
```
## menu
![スクリーンショット 2022-06-09 12.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4b7734f9-f5f8-a968-0854-0cc0b81dec58.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        VStack {
            Picker("ひらがな", selection: $pickerIndex) {
                Text("あいうえお").tag(0)
                Text("かきくけこ").tag(1)
                Text("さしすせそ").tag(2)
                Text("たちつてと").tag(3)
                Text("なにぬねの").tag(4)
            }
            .pickerStyle(.menu)
            .frame(width: 300, height: 100)
        }
        .frame(width: 600, height: 400)
    }
}
```

## radioGroup
![スクリーンショット 2022-06-09 12.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/d6cc22e5-1161-238b-d8cc-0c4b27620d82.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        VStack {
            Picker("ひらがな", selection: $pickerIndex) {
                Text("あいうえお").tag(0)
                Text("かきくけこ").tag(1)
                Text("さしすせそ").tag(2)
                Text("たちつてと").tag(3)
                Text("なにぬねの").tag(4)
            }
            .pickerStyle(.radioGroup)
            .frame(width: 300, height: 100)
        }
        .frame(width: 600, height: 400)
    }
}
```

## segmented
![スクリーンショット 2022-06-09 12.53.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1baf57be-8457-c8db-11bd-fead87af9817.png)
```swift
struct ContentView: View {
    @State var pickerIndex: Int = 0
    var body: some View {
        VStack {
            Picker("ひらがな", selection: $pickerIndex) {
                Text("あいうえお").tag(0)
                Text("かきくけこ").tag(1)
                Text("さしすせそ").tag(2)
                Text("たちつてと").tag(3)
                Text("なにぬねの").tag(4)
            }
            .pickerStyle(.segmented)
            .frame(width: 300, height: 100)
        }
        .frame(width: 600, height: 400)
    }
}
```