昨天我們學會了 SwiftUI 常見 UI 元件，像是 Text、Image、Button、TextField、Toggle、List、ProgressView。

這些元件能組合出大部分的 App 基礎畫面。

今天我們要來看看 SwiftUI 提供的 互動與彈出元件，讓 App 不再只是靜態畫面，而能回應使用者操作。

Alert（警告框）

用來提示使用者或顯示訊息。

@State private var showAlert = false

var body: some View {
    Button("顯示警告") {
        showAlert = true
    }
    .alert("提示訊息", isPresented: $showAlert) {
        Button("確定", role: .cancel) {}
        Button("刪除", role: .destructive) {
            print("已刪除")
        }
    } message: {
        Text("這是一個警告框")
    }
}

• alert ：設定 Alert
• isPresented：是否顯示 Alert
• message：Alert 的訊息內容

Sheet（底部彈出視窗）

適合顯示另一個畫面，常用在「詳細資訊」、「設定」等場景。

var body: some View {
    Button("打開 Sheet") {
        showSheet = true
    }
    .sheet(isPresented: $showSheet) {
        VStack {
            Text("這是彈出視窗")
                .font(.title)
            Button("關閉") {
                showSheet = false
            }
        }
        .padding()
    }
}

• sheet ：設定Sheet
• isPresented：表示要不要呈現Sheet

設定高度

presentationDetents 可設定多個高度，使用者能拖曳切換，開啟時會顯示最小的高度。

設定一個高度

@State private var showSheet = false
    
    var body: some View {
        Button("打開 Sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            VStack {
                Text("這是彈出視窗")
                    .font(.title)
                Button("關閉") {
                    showSheet = false
                }
            }
            .padding()
            .presentationDetents([.medium])
        }
    }

設定多個高度

@State private var showSheet = false
    
    var body: some View {
        Button("打開 Sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            VStack {
                Text("這是彈出視窗")
                    .font(.title)
                Button("關閉") {
                    showSheet = false
                }
            }
            .padding()
            .presentationDetents([.medium, .large, .fraction(0.8), .height(200)])
        }
    }

FullScreenCover（全螢幕顯示）

與 sheet 類似，但會 全螢幕覆蓋 當前畫面。

@State private var showFullScreen = false

var body: some View {
    Button("全螢幕顯示") {
        showFullScreen = true
    }
    .fullScreenCover(isPresented: $showFullScreen) {
        VStack {
            Text("全螢幕畫面")
                .font(.largeTitle)
            Button("返回") {
                showFullScreen = false
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.red)
    }
}

confirmationDialog（選項列表）

提供多個操作選項，常見於 iOS 的底部選單。

@State private var showOptions = false

var body: some View {
    Button("顯示選單") {
        showOptions = true
    }
    .confirmationDialog("請選擇操作", isPresented: $showOptions, titleVisibility: .visible) {
        Button("相機") { print("開啟相機") }
        Button("相簿") { print("開啟相簿") }
        Button("取消", role: .cancel) {}
    }
}

Popover（浮動視窗）

在 iPad 或大螢幕裝置上，會以小視窗形式顯示。

@State private var showPopover = false

var body: some View {
    Button("顯示 Popover") {
        showPopover = true
    }
    .popover(isPresented: $showPopover) {
        Text("這是浮動視窗")
            .padding()
    }
}

今日小結

今天我們介紹了 SwiftUI 的互動與彈出元件：

• Alert：顯示警告框
• Sheet：底部彈出視窗
• FullScreenCover：全螢幕顯示
• confirmationDialog：選項列表
• Popover：浮動視窗（iPad 常用）

這些元件能讓 App 與使用者有更多互動，提升體驗。

明天，我們會進入 狀態管理 (State Management)，認識 @State、@Binding等重要觀念，這是 SwiftUI 開發的核心。