底部作業表導致父視圖移動

我有一個可以打開和關閉的底頁。當我關閉視圖時，我注意到父視圖發生了變化。我試過調整變數，找不到罪魁禍首。

我懷疑這個問題發生在.gesture底部表類的末尾，但我不確定。無論如何，在切換時是否可以阻止父視圖移動？

底頁

fileprivate enum Constants {
    static let radius: CGFloat = 16
    static let indicatorHeight: CGFloat = 6
    static let indicatorWidth: CGFloat = 60
    static let snapRatio: CGFloat = 0.25
    static let minHeightRatio: CGFloat = 0.3
}

struct BottomSheetView<Content: View>: View {
    @Binding var isOpen: Bool

    let maxHeight: CGFloat
    let minHeight: CGFloat
    let content: Content

    @GestureState private var translation: CGFloat = 0

    private var offset: CGFloat {
        isOpen ? 0 : maxHeight - minHeight
       
    }

    private var indicator: some View { // << toggling while open
        RoundedRectangle(cornerRadius: Constants.radius)
            .fill(Color.secondary)
            .frame(
                width: Constants.indicatorWidth,
                height: Constants.indicatorHeight
        ).onTapGesture {
            self.isOpen.toggle()
        }
    }

    init(isOpen: Binding<Bool>, maxHeight: CGFloat, @ViewBuilder content: () -> Content) {
        self.minHeight = maxHeight * Constants.minHeightRatio
        self.maxHeight = maxHeight
        self.content = content()
        self._isOpen = isOpen
    }

    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                self.indicator.padding()
                self.content
            }
            .frame(width: geometry.size.width, height: self.maxHeight, alignment: .top)
            .background(Color(.secondarySystemBackground))
            .cornerRadius(Constants.radius)
            .frame(height: geometry.size.height, alignment: .bottom)
            .offset(y: max(self.offset   self.translation, 0))
            .animation(.interactiveSpring())
            .gesture(
                DragGesture().updating(self.$translation) { value, state, _ in
                    state = value.translation.height
                }.onEnded { value in
                    let snapDistance = self.maxHeight * Constants.snapRatio
                    guard abs(value.translation.height) > snapDistance else {
                        return
                    }
                    self.isOpen = value.translation.height < 0
                }
            )
        }
    }
}

看法

  struct TestView2: View {
   
    @State private var showMenu = false
    @State var deleteAccountSheet = false
  
    var body: some View {
            NavigationView{
                VStack{
                   Text("click me")
                        .onTapGesture{
                            deleteAccountSheet = true
                        }
                    HStack{
                        Text( "this will move up in view" )
                            .font(.custom("OpenSans-Regular", size: 24))
                    }
                    Text("in the view")
                    
                }
                
            
            }
            .blur(radius: deleteAccountSheet ? 2 : 0) // blur when bottomsheet open
                GeometryReader { geometry in {
                    BottomSheetView(
                        isOpen: self.$deleteAccountSheet,
                        maxHeight: geometry.size.height * 0.7
                    ) {
                        Text("Give me one more click")
                            .onTapGesture{
                                print("click")
                                self.deleteAccountSheet = false
                            }
                    }
                   
                }().edgesIgnoringSafeArea(.all)
                       
                }
            }
             
        }

uj5u.com熱心網友回復：

包含文本的VStack內容與底部頁面垂直布局。您可以使用 ZStack 確保底部作業表布局在VStack包含文本的頂部。

VStack包含文本的高度和 的高度GeometryReader相等，這意味著 的值geometry.size.height真的是fullScreenHeight * 0.5 * 0.7。

如果 的內容NavigationView嵌套在 aZStack中，geometry.size.height則在這種情況下將是螢屏的全高。從 更改maxHeight: geometry.size.height * 0.7為maxHeight: geometry.size.height * 0.5 * 0.7將為您提供與您在提供的示例中相同的底頁大小。這是一個如何更新View顯示底部作業表以使其正常作業的示例：

struct TestView: View {

    @State private var showMenu = false
    @State var deleteAccountSheet = false

    var body: some View {
        NavigationView{
            ZStack {
                VStack {
                    Text("click me")
                        .onTapGesture{
                            deleteAccountSheet = true
                        }
                    HStack{
                        Text( "this will move up in view" )
                            .font(.custom("OpenSans-Regular", size: 24))
                    }
                    Text("in the view")
                }
                .blur(radius: deleteAccountSheet ? 2 : 0)

                GeometryReader { geometry in
                    BottomSheetView(
                        isOpen: self.$deleteAccountSheet,
                        maxHeight: geometry.size.height * 0.5 * 0.7
                    ) {
                        Text("Give me one more click")
                            .onTapGesture{
                                print("click")
                                self.deleteAccountSheet = false
                            }
                    }
                }
                .edgesIgnoringSafeArea(.all)
            }
        }
    }
}

標籤：迅速迅捷

上一篇：為什么閉包中的回傳值沒有覆寫SwiftUI中系結的回傳值？[復制]

下一篇：如何將結構陣列傳遞給CAPI？