3
Help us understand the problem. What are the problem?

posted at

【SwiftUI】Pickerのスタイル

iOS

automatic

リスト内
Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.32.06.png

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

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)
    }
}

注意
Pickerを配置する場所によってスタイルが変動

inline

Simulator Screen Shot - iPhone 12 - 2022-06-09 at 12.34.31.png

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

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

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

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

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

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

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

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

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)
    }
}

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
3
Help us understand the problem. What are the problem?