SwiftUI Academy · Урок

Выбор вариантов с помощью Picker

Предлагайте варианты с помощью меню и сегментированных переключателей.

«Выбор вариантов с помощью Picker» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.

Чему я научусь в уроке «Выбор вариантов с помощью Picker»?

Предлагайте варианты с помощью меню и сегментированных переключателей. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать SwiftUI Academy?

Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Выбор вариантов с помощью Picker»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке SwiftUI Academy?

Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к SwiftUI Academy