[英]SwiftUI: How to pass a View as a parameter into another View to get Bottom Sheet?
I'm trying to create a View for the bottom sheet.我正在尝试为底部工作表创建一个视图。 It will have some view with a button when we tap on the button a bottom sheet has to appear.
当我们点击按钮时,它将有一些带有按钮的视图,底部工作表必须出现。
I can modify the bottom sheet's colour, height, corner radius, how much the background view has to blur.我可以修改底部工作表的颜色、高度、角半径、背景视图必须模糊的程度。
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())
}
}
}
}
In the above code在上面的代码中
VStack {
Button(action: {
self.showBottomSheet.toggle()
}){
Text("click here")
.padding()
}
Spacer()
}
This VStack should replace with some other View, from that View I want to pass the Binding values.这个 VStack 应该用其他一些视图替换,我想从那个视图传递绑定值。
Is there a way to achieve that?有没有办法实现这一目标? Thanks in advance.
提前致谢。
I have achieved the requirement with ViewModifier
我已经用
ViewModifier
达到了要求
First I have created a ViewModifier struct.首先,我创建了一个 ViewModifier 结构。 which will have all the required values in
init()
它将在
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())
}
}
}
}
Second I've created an extension
for View
which will have a function with all the values as arguments and initialized the modifier in it.其次,我为
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))
}
}
Third I've created a View.第三,我创建了一个视图。 In that I have added some elements and simply call the modifier here with my required bottomsheet size, colour and other values.
我添加了一些元素,并在此处简单地使用我所需的底片尺寸、颜色和其他值调用修饰符。
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)
}
}
Final output最终输出
struct BottomSheetView<Content: View>: View {
var content: Content
...
var body: some View {
content //do anything you want with content
}
}
and you need to pass your content in your View Ininit like并且您需要在 View Ininit 中传递您的内容,例如
BottomSheetView(content: Text("test"),
showBottomSheet: $test1,
bgColor: $test2,
cornerRadius: $test3,
bottomSheetRatio: $ctest4,
blurPoint: $test5)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.