SwiftUI Academy · レッスン

再利用可能なトグル行を作る

親の状態を変更する子ビューを作成します。

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

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

A Component That Edits

Lets build a reusable row that flips a setting. The trick: the row mutates the parents state through a @Binding. 🧩

Design the Inputs

The row needs a label to show and a binding to change. So it takes a title string and a Bool binding.

Declare the Child View

Create a struct with a plain title and a binding for the value it will toggle on and off.

struct ToggleRow: View {
    let title: String
    @Binding var isOn: Bool
    var body: some View { Text("Placeholder") }
}

Build the Body

Inside the body, a single Toggle shows the title and writes through the binding when tapped.

var body: some View {
    Toggle(title, isOn: $isOn)
        .padding()
}

Use It in a Parent

The parent owns the setting with @State, then drops the row in and passes the value with a dollar sign.

struct SettingsView: View {
    @State private var notify = true
    var body: some View { ToggleRow(title: "Notify", isOn: $notify) }
}

Reuse It Everywhere

Now add ten settings with ten rows, each bound to its own state. One small view, reused across the whole screen.

ToggleRow(title: "Sound", isOn: $sound)
ToggleRow(title: "Vibrate", isOn: $vibrate)

Parent Sees Every Change

Flip any row and the parents matching @State updates instantly. The parent can react to the new value right away.

Text(notify ? "On" : "Off")
    .foregroundStyle(notify ? .green : .gray)

Keep the Child Dumb

The row holds no opinions about where data lives. It just edits the binding it was given, which makes it portable.

Add a Little Style

Because the row is one view, you can style it once and every instance looks the same. Consistency comes for free. 💅

Toggle(title, isOn: $isOn)
    .tint(.orange)
    .font(.headline)

Swap the Type Later

Want a row for a number instead? Change the binding type and the same pattern works for any editable value.

Small Pieces, Big Apps

Reusable binding-driven rows are how real apps stay tidy. Compose many tiny editors into one clean settings screen.

Quick Check

Quick check on the toggle row.

Recap: A Reusable Editor

A child view with a @Binding becomes a reusable editor. Pass state in with the dollar sign and drop it in anywhere. 🎉

よくある質問

「再利用可能なトグル行を作る」レッスンは無料ですか？

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

「再利用可能なトグル行を作る」で何を学びますか？

親の状態を変更する子ビューを作成します。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「再利用可能なトグル行を作る」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← SwiftUI Academyに戻る