SwiftUI 底部弹出视图 Sheets 自定义效果示例

底部弹出 Sheets 是平时开发以及使用都很常见的一种视图,例如购物时选择商品的sku,分享页,Tips提示页等等,原生的 Sheets 页效果往往不能满足要求,本篇内容演示如何…

底部弹出 Sheets 是平时开发以及使用都很常见的一种视图,例如购物时选择商品的sku,分享页,Tips提示页等等,原生的 Sheets 页效果往往不能满足要求,本篇内容演示如何自定义 Sheets 页面。


演示效果

SwiftUI 自定义底部 Sheets 效果示例

代码示例

import SwiftUI

struct ContentView: View {
    
    @State private var showSheetA = false
    @State private var showSheetB = false
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 24) {
                HStack(spacing: 32) {
                    Button("节日提醒") {
                        if !showSheetB {
                            showSheetA.toggle()
                        }
                    }
                    Button("分享") {
                        if !showSheetA {
                            showSheetB.toggle()
                        }
                        
                    }
                }
                .padding(.bottom, 180)
            }
            .navigationTitle("Codeun.com")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color(uiColor: UIColor(red: 0.91, green: 0.91, blue: 0.92, alpha: 1.00)))
        }
        .sheetOfBottom(isPresented: $showSheetA) {
            SheetView(title: "国庆节", content: "1949年10月1日中华人民共和国中央人民政府成立。中华人民共和国国庆节是国家的一种象征,是伴随着新中国的成立而出现的,并且变得尤为重要。",
                      image: .init(content: "heart.fill", tint: .red, foreground: .white),
                      buttonA: .init(content: "确认", tint: Color(red: 0.92, green: 0.28, blue: 0.40, opacity: 1.00), foreground: .white),
                      buttonB: .init(content: "取消", tint: Color(red: 0.86, green: 0.87, blue: 0.88, opacity: 1.00), foreground: .primary))
                .presentationDetents([.height(400)])
                .presentationBackgroundInteraction(.enabled(upThrough: .height(400)))
        }
        .sheetOfBottom(isPresented: $showSheetB) {
            ShareSheetView()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.background.shadow(.drop(radius: 5)), in: .rect(cornerRadius: 25))
            .padding(.horizontal, 15)
            .padding(.top, 15)
            // 自定义视图的弹出高度, 指定视图可以占据屏幕几乎全部的高度(0.999 倍屏幕高度)
            .presentationDetents([.height(300), .fraction(0.999)])
            // 设置当视图的高度不超过 300 点时,允许用户与背景进行交互
            .presentationBackgroundInteraction(.enabled(upThrough: .height(300)))
        }
    }
}

完整代码示例

SwiftUI 底部弹出视图 Sheets 自定义效果示例

SwiftUI 自定义 Sheets 页面视图示例

赞助会员赞助会员免费
资源价格 ¥5.00 销售数量 0 更新时间 2024-10-08
已付费?登录刷新

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1324.html ·

(0)
上一篇 2024-10-05 下午3:36
下一篇 2024-10-22 上午10:41

发表回复

登录后才能评论