SwiftUI:如何使用多个 Sheet

当我们在工作中,总会遇到弹出多个Sheet的情况。弹出一两个的情况下,我们可以使用绑定Boolean变量来完成。但是如果有很多种情况,会弹出很多种不同的Sheet我们该如何了来做呢?这就是我们今天要解决的问题

绑定 Bool 值的方法

SwiftUI 复制代码
.sheet(isPresented: <#T##Binding<Bool>#>, content: <#T##() -> View#>)

这种方法当我们有多个sheet要弹出时,就很麻烦。所以我们建议使用下面方法来完成sheet的弹出,它具有更好的扩展性。

绑定Item方法

SwiftUI 复制代码
.sheet(
item: <#T##Binding<Identifiable?>#>, 
content: <#T##(Identifiable) -> View#>)

它需要一个实现了 Identifiable 协议的 Binding 值。

我们用一个 Model 来承载显示的内容,让model实现 Identifiable 协议。

model 如下:

SwiftUI 复制代码
struct ItemModel: Identifiable {
    let id = UUID().uuidString
    let title: String
}

在使用sheet的地方写上如下代码:

SwiftUI 复制代码
.sheet(item: $selectItemModel) { itemModel in
  NextScreenView(itemModel: itemModel)
}

当你点击某个控件时,我们需要改变 selectItemModel 的值。

SwiftUI 复制代码
Button("BUTTON (index)") {
  selectItemModel = ItemModel(title: "(index)")
}

这样就是可以实现多个sheet弹出的效果。


以下是全部代码

SwiftUI 复制代码
// multiple sheets
struct ItemModel: Identifiable {
    let id = UUID().uuidString
    let title: String
}

struct MultipleSheetsSample: View {
    @State var selectItemModel: ItemModel? = nil
    
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(0..<20) { index in
                    Button("BUTTON (index)") {
                        selectItemModel = ItemModel(title: "(index)")
                    }
                }
            }
            .sheet(item: $selectItemModel) { itemModel in
                NextScreenView(itemModel: itemModel)
            }
        }
    }
}

struct NextScreenView: View {
    let itemModel: ItemModel
    var body: some View {
        Text(itemModel.title)
            .font(.largeTitle)
    }
}

大家有什么看法呢?欢迎留言讨论。

公众号:RobotPBQ

相关推荐
2501_916007474 分钟前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909063 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_938773993 小时前
Objective-C 类的归档与解档:NSCoding 协议实现对象持久化存储
开发语言·ios·objective-c
美狐美颜SDK开放平台3 小时前
美颜SDK跨平台适配实战解析:让AI美颜功能在iOS与Android都丝滑运行
android·人工智能·ios·美颜sdk·直播美颜sdk·第三方美颜sdk·美颜api
2501_915918414 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
2501_915921435 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918416 小时前
iOS 26 应用管理实战 多工具协同构建开发与调试的高效体系
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
2501_938780286 小时前
Kotlin Multiplatform Mobile(KMM):实现 iOS 与 Android 共享业务逻辑
android·ios·kotlin
游戏开发爱好者87 小时前
iOS 抓包工具实战 开发者的工具矩阵与真机排查流程
android·ios·小程序·https·uni-app·iphone·webview