LoginSignup
4

More than 1 year has passed since last update.

【SwiftUI】Pickerのスタイル

Posted at

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 get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4