模态窗口与全屏显示

在 SwiftUI 中，模态窗口和全屏显示是实现用户界面交互的重要方式。模态窗口用于展示额外的内容，而全屏显示则适合需要更多屏幕空间的视图。以下将详细介绍这两种展示方式的使用方法。

1. 模态窗口

1.1 使用 .sheet 创建模态窗口

sheet 修饰符用于在当前视图上呈现模态窗口。你可以通过绑定的布尔值来控制模态窗口的显示与隐藏。

示例：基本模态窗口

import SwiftUI

struct ModalViewExample: View {
    @State private var showModal = false

    var body: some View {
        Button("Show Modal") {
            showModal.toggle() // 切换模态窗口显示
        }
        .sheet(isPresented: $showModal) {
            ModalContentView() // 显示模态内容视图
        }
    }
}

struct ModalContentView: View {
    var body: some View {
        VStack {
            Text("This is a Modal Window") // 模态窗口内容
                .font(.largeTitle)
            Button("Close") {
                // 在实际使用中可以通过绑定的布尔值控制关闭
            }
        }
        .padding()
    }
}

1.2 传递数据到模态窗口

你可以通过初始化参数将数据传递到模态窗口。

示例：传递数据

struct ModalWithDataExample: View {
    @State private var showModal = false
    @State private var message = "Hello, World!"

    var body: some View {
        Button("Show Modal") {
            showModal.toggle()
        }
        .sheet(isPresented: $showModal) {
            ModalContentView(message: message) // 传递数据到模态窗口
        }
    }
}

struct ModalContentView: View {
    var message: String // 接收传递的数据

    var body: some View {
        Text(message) // 显示传递的数据
            .font(.largeTitle)
    }
}

2. 全屏显示

2.1 使用 .fullScreenCover 创建全屏视图

fullScreenCover 修饰符用于在当前视图上呈现全屏视图。与 sheet 类似，你可以通过绑定的布尔值来控制全屏视图的显示与隐藏。

示例：基本全屏视图

struct FullScreenExample: View {
    @State private var showFullScreen = false

    var body: some View {
        Button("Show Full Screen") {
            showFullScreen.toggle() // 切换全屏视图显示
        }
        .fullScreenCover(isPresented: $showFullScreen) {
            FullScreenContentView() // 显示全屏内容视图
        }
    }
}

struct FullScreenContentView: View {
    var body: some View {
        VStack {
            Text("This is a Full Screen View") // 全屏视图内容
                .font(.largeTitle)
            Button("Dismiss") {
                // 在实际使用中可以通过绑定的布尔值控制关闭
            }
        }
        .padding()
    }
}

2.2 传递数据到全屏视图

与模态窗口一样，你可以在全屏视图中传递数据。

示例：传递数据到全屏视图

struct FullScreenWithDataExample: View {
    @State private var showFullScreen = false
    @State private var message = "Welcome to Full Screen!"

    var body: some View {
        Button("Show Full Screen") {
            showFullScreen.toggle()
        }
        .fullScreenCover(isPresented: $showFullScreen) {
            FullScreenContentView(message: message) // 传递数据到全屏视图
        }
    }
}

struct FullScreenContentView: View {
    var message: String // 接收传递的数据

    var body: some View {
        Text(message) // 显示传递的数据
            .font(.largeTitle)
    }
}

3. 总结

  • 模态窗口：使用 .sheet 修饰符创建，适合展示额外的内容，支持传递数据。
  • 全屏显示：使用 .fullScreenCover 修饰符创建，适合需要更多屏幕空间的视图，同样支持传递数据。

通过合理使用模态窗口和全屏显示，可以提高应用的交互性和用户体验，使用户更方便地访问不同的功能和内容。

Last Updated::