底部弹出 Sheets
是平时开发以及使用都很常见的一种视图,例如购物时选择商品的sku,分享页,Tips提示页等等,原生的 Sheets
页效果往往不能满足要求,本篇内容演示如何自定义 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)))
}
}
}
完整代码示例
本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
· 如若转载,请注明出处:https://www.codeun.com/archives/1324.html ·