SwiftUI: Как передать вид в качестве параметра в другой вид, чтобы получить нижний лист?

Question

Я пытаюсь создать вид для нижнего листа. У него будет некоторое представление с кнопкой, когда мы нажмем на кнопку, должен появиться нижний лист.

Я могу изменить цвет нижнего листа, высоту, радиус угла, насколько размыт фоновый вид.

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 следует заменить другим видом, из этого представления я хочу передать значения Binding.

Есть ли способ достичь этого? Заранее спасибо.

Answer 1

Я выполнил требование с помощью 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())
            }

        }
    }
}

Во-вторых, я создал extension для View, который будет иметь функцию со всеми значениями в качестве аргументов и инициализировал модификатор в ней .

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))
    }
}

В-третьих, я создал вид. Я добавил некоторые элементы и просто назвал здесь модификатор с требуемым размером, цветом и другими значениями для нижнего листа.

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)
    }
}

Окончательный результат

Answer 2

struct BottomSheetView<Content: View>: View {
   var content: Content
    ...
   var body: some View {
       content //do anything you want with content
   }
}

, и вам нужно передать свой контент в View Ininit как

 BottomSheetView(content: Text("test"),
    showBottomSheet: $test1,
    bgColor: $test2,
    cornerRadius: $test3,
    bottomSheetRatio: $ctest4,
    blurPoint: $test5)