シートを表示する
シートとバインディングを使ってモーダルビューを表示します。
「シートを表示する」は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 = falseThe .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 dismissCalling 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フィードバックを取得できます。ローカル設定は不要です。