SwiftUI Academy · レッスン

Picker で選択肢を選ぶ

メニューとセグメント化された Picker で選択肢を提示します。

「Picker で選択肢を選ぶ」はCoddyKit上の無料SwiftUI Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Meet the Picker

A Picker lets users choose one option from several. It is the go-to for selecting a category, color, or plan. 📋

Picker Tracks a Selection

A Picker stores the selected value in state. As the user chooses, that bound property updates to match.

@State private var fruit = "Apple"

Bind the Selection

Pass a label and the selection binding so the Picker knows which property to read and update.

Picker("Fruit", selection: $fruit) {
    // options go here
}

List the Options

Inside the closure, add a view per choice and tag each with its value using tag so selection can match it.

Text("Apple").tag("Apple")
Text("Pear").tag("Pear")

Loop with ForEach

For many options, generate them with ForEach over an array instead of writing each row by hand.

ForEach(fruits, id: \.self) { name in
    Text(name).tag(name)
}

Match Selection Types

The selection type must match the tag type. If you select a String, every tag must also be a String.

The Menu Style

Apply pickerStyle to change the look. The menu style shows the choice and pops options on tap.

Picker("Fruit", selection: $fruit) { }
    .pickerStyle(.menu)

The Segmented Style

For a few short options, the segmented style lays them out as a row of side-by-side buttons.

.pickerStyle(.segmented)

The Wheel Style

The wheel style shows a spinning drum, classic for dates or long lists where scrolling feels natural.

.pickerStyle(.wheel)

React to the Choice

Read the bound value anywhere to react to the user's pick, like showing the selected fruit in a Text.

Text("You picked \(fruit)")

The Full View

Here is a complete Picker: a selection binding, options from ForEach, and the segmented style applied.

struct ChooseView: View {
    @State private var fruit = "Apple"
    let fruits = ["Apple", "Pear"]
    var body: some View {
        Picker("Fruit", selection: $fruit) {
            ForEach(fruits, id: \.self) { Text($0).tag($0) }
        }
    }
}

Quick Check

Why must each Picker option be tagged?

Recap

A Picker binds to a selection, tags each option, and changes look with menu, segmented, or wheel styles. 📋

よくある質問

「Picker で選択肢を選ぶ」レッスンは無料ですか？

はい。「Picker で選択肢を選ぶ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

「Picker で選択肢を選ぶ」で何を学びますか？

メニューとセグメント化された Picker で選択肢を提示します。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SwiftUI Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Picker で選択肢を選ぶ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwiftUI Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← SwiftUI Academyに戻る