在 SwiftUI 中使用 DragGesture() 计算不正确的高度 [英] Incorrect height calculation with DragGesture() in SwiftUI

问题描述

我正在使用 SwiftUI 开发基于地图的应用程序，我需要通过向上/向下拖动它来更改模式卡片的高度(这是地图信息所在的视图)，就像在 Apple 地图中一样.

I'm doing a Map based app with SwiftUI and I need to change the height of modal Card (this is a view where the map info will be located) via dragging it up/down, like in Apple Maps.

这是我尝试与之交互的高度的卡片的屏幕截图https://i.stack.imgur.com/mZX2m.png

Here is the screenshot of Card which height Im trying to interact with https://i.stack.imgur.com/mZX2m.png

我已经用 RoundedRectangle 实现了一个 ZStack 并添加了一个 DragGesture() 修饰符.

I've implemented a ZStack with RoundedRectangle and added a DragGesture() modifier.

            ZStack(alignment: .top){
                RoundedRectangle(cornerRadius: 16.0)
                    .frame(height:currentHeight)
                Text("Card")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
                    .multilineTextAlignment(.center)
                    .padding(.top)
            }.gesture(DragGesture()
                .onChanged { value in
                    if (self.currentHeight + value.predictedEndLocation.y - value.startLocation.y > UIScreen.main.bounds.height) {
                        self.currentHeight = UIScreen.main.bounds.height
                    } else {
                        self.currentHeight += value.predictedEndLocation.y - value.startLocation.y
                    }
                }
                .onEnded { value in
                    if (self.currentHeight + value.predictedEndLocation.y - value.startLocation.y > UIScreen.main.bounds.height) {
                        self.currentHeight = UIScreen.main.bounds.height
                    } else {
                        self.currentHeight += value.predictedEndLocation.y - value.startLocation.y
                    }
                })

第一个问题是向上拖动，卡片越过屏幕高度，我检查 UIScreen 边界高度以防止高度大于屏幕，但计算问题更多，卡片的高度很快变得不明确，它没有'不想拖下去.

The first problem was with dragging up, the card went over screen height and Im checking for UIScreen bounds height to prevent height being bigger than screen, but there are more problems with calculations, Card's height gets ambiguous very fast and it doesn't want to drag down.

我从未使用过手势识别器.你能告诉我正确的计算方法吗?

I have never worked with gesture recognizers. Can you tell me the correct way of calculations?

谢谢！

推荐答案

这是一个方法(下面代码中有一些有用的注释)

Here is an approach (some helpful comments in code below)

struct TestResizingCard: View {

    static let kMinHeight: CGFloat = 100.0
    @State var currentHeight: CGFloat = kMinHeight // << any initial

    var body: some View {
        GeometryReader { g in // << for top container height limit
            ZStack(alignment: .bottom) {
                Rectangle().fill(Color.yellow) // << just for demo

                self.card()
                .gesture(DragGesture()
                    .onChanged { value in
                        // as card is at bottom the offset is reversed
                        let newHeight = self.currentHeight - (value.location.y - value.startLocation.y)
                        if newHeight > Self.kMinHeight && newHeight < g.size.height {
                            self.currentHeight = newHeight
                        }
            })
            }
        }
    }

    func card() -> some View {
        ZStack(alignment: .top){
            RoundedRectangle(cornerRadius: 16.0)
                .frame(height:currentHeight)
            Text("Card")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
                .multilineTextAlignment(.center)
                .padding(.top)
        }
    }
}

struct TestResizingCard_Previews: PreviewProvider {
    static var previews: some View {
        TestResizingCard()
    }
}

这篇关于在 SwiftUI 中使用 DragGesture() 计算不正确的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！