我正在尝试为底部工作表创建一个 View 。当我们点击底部工作表必须出现的按钮时,它将有一些带有按钮的 View 。
我可以修改底部工作表的颜色、高度、圆角半径、背景 View 必须模糊的程度。
struct BottomSheetView: View {
@Binding var showBottomSheet: Bool
@Binding var bgColor: Color
@Binding var cornerRadius: CGFloat
@Binding var bottomSheetRatio: CGFloat
@Binding var blurPoint: CGFloat
var body: some View {
GeometryReader { geometry in
ZStack {
VStack {
Button(action: {
self.showBottomSheet.toggle()
}){
Text("click here")
.padding()
}
Spacer()
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.blur(radius: self.showBottomSheet ? self.blurPoint : 0)
.onTapGesture {
if self.showBottomSheet {
self.showBottomSheet = false
}
}
Rectangle()
.fill(self.bgColor)
.cornerRadius(self.cornerRadius)
.offset(y: self.showBottomSheet ? geometry.size.height * self.bottomSheetRatio : geometry.size.height + 200)
.animation(.spring())
}
}
}
}
在上面的代码中
VStack {
Button(action: {
self.showBottomSheet.toggle()
}){
Text("click here")
.padding()
}
Spacer()
}
这个 VStack 应该用其他 View 替换,我想从那个 View 传递绑定(bind)值。
有办法实现吗?提前致谢。
最佳答案
我已经通过ViewModifier
实现了要求
首先,我创建了一个 ViewModifier 结构。它将在 init()
struct BottomSheetModifier: ViewModifier {
var showBottomSheet: Bool
var blurPoint: CGFloat
var bgColor: Color
var cornerRadius: CGFloat
var bottomSheetRatio: CGFloat
init(showBottomSheet: Bool, blurPoint: CGFloat, bgColor: Color, cornerRadius: CGFloat, bottomSheetRatio: CGFloat) {
self.showBottomSheet = showBottomSheet
self.blurPoint = blurPoint
self.bgColor = bgColor
self.cornerRadius = cornerRadius
self.bottomSheetRatio = bottomSheetRatio
}
func body(content: Content) -> some View {
GeometryReader { geometry in
ZStack {
content
.blur(radius: self.showBottomSheet ? self.blurPoint : 0)
RoundedRectangle(cornerRadius: self.cornerRadius)
.fill(self.bgColor)
.offset(y: self.showBottomSheet ? geometry.size.height * self.bottomSheetRatio : geometry.size.height + 200)
.animation(.spring())
}
}
}
}
其次,我为 View
创建了一个 extension
,它将有一个函数,所有值都作为参数,并在其中初始化修饰符。
extension View {
func bottomSheet(showBottomSheet: Bool, blurPoint: CGFloat, bgColor: Color, cornerRadius: CGFloat, bottomSheetRatio: CGFloat) -> some View {
modifier(BottomSheetModifier(showBottomSheet: showBottomSheet, blurPoint: blurPoint, bgColor: bgColor, cornerRadius: cornerRadius, bottomSheetRatio: bottomSheetRatio))
}
}
第三,我创建了一个 View 。因为我添加了一些元素,并使用我需要的底页尺寸、颜色和其他值在这里简单地调用修饰符。
struct DemoBottomSheetView: View {
@Binding var showBottomSheet: Bool
var body: some View {
VStack(spacing: 20) {
Text("welcome to bottom sheet")
Button(action: {
self.showBottomSheet.toggle()
}){
Text("Click Me")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
Spacer()
}
.onTapGesture {
if self.showBottomSheet {
self.showBottomSheet = false
}
}
.bottomSheet(showBottomSheet: self.showBottomSheet, blurPoint: 4, bgColor: .red, cornerRadius: 25, bottomSheetRatio: 0.5)
}
}
最终输出
关于ios - SwiftUI:如何将一个 View 作为参数传递给另一个 View 以获取底页?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60416712/