0Pricing
SwiftUI Academy · レッスン

シートを表示する

シートとバインディングを使ってモーダルビューを表示します。

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

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

What Is a Sheet?

A sheet is a card that slides up from the bottom to show extra content, like a form or detail, without leaving your current screen. 📄

Sheets Need a Trigger

A sheet appears when a boolean state flips to true. You store that flag in your view and flip it when the user taps something.

@State private var showSheet = false

The .sheet Modifier

You attach .sheet to a view and bind it to your boolean. When the value is true, SwiftUI presents the content you return.

.sheet(isPresented: $showSheet) {
    Text("Hello from the sheet!")
}

The Dollar Sign Binding

The $ before showSheet passes a two-way binding, so SwiftUI can both read the flag and reset it to false when the sheet closes.

.sheet(isPresented: $showSheet) { DetailView() }

Opening the Sheet

Set the boolean to true from a button action and the sheet animates up automatically. You never call a present function yourself. ✨

Button("Show Details") {
    showSheet = true
}

Putting It Together

Combine the button, the state, and the .sheet modifier on one view and you have a working modal in just a few lines.

Button("Open") { showSheet = true }
    .sheet(isPresented: $showSheet) {
        Text("Sheet content")
    }

Dismissing a Sheet

Users can swipe a sheet down to close it. To dismiss it in code, read the dismiss action from the environment inside the sheet.

@Environment(\.dismiss) private var dismiss

Calling dismiss()

Give the sheet a Done button that calls dismiss(). This is the polite way to let users finish and return to the main screen.

Button("Done") { dismiss() }

Sheets Get Their Own State

A sheet is a normal SwiftUI view, so it can hold its own state, modifiers, and even another sheet. Treat it like any other screen.

Presenting With an Item

Use sheet(item:) when the sheet depends on a selected value. SwiftUI shows the sheet whenever that optional item is non-nil.

.sheet(item: $selectedBook) { book in
    BookDetail(book: book)
}

One Sheet at a Time

A view shows one sheet per modifier. For several modals, use separate flags or item bindings so they never collide on screen.

Quick Check

How do you tell SwiftUI to present a sheet?

Recap: Sheets

You learned that a sheet slides up from a boolean flag, attaches with .sheet, and closes via swipe or the dismiss action. Nice work! 🎉

よくある質問

「シートを表示する」レッスンは無料ですか?

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

「シートを表示する」で何を学びますか?

シートとバインディングを使ってモーダルビューを表示します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「シートを表示する」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. シートを表示する
  2. デタントとドラッグインジケーター
  3. アクション付きアラート
  4. 確認ダイアログ
← SwiftUI Academyに戻る