iPadOS 中类似于带有棘爪的模态框的组件是什么？

Question

我在 iPadOS 中遇到过一个 UI 组件，其行为类似于带有棘爪的模式，但我不确定它的名称或如何正确实现它。它似乎表现出类似棘爪的行为，但当尝试使用带有棘爪的薄片时，它在 iPad 上无法按预期发挥作用。

有人可以帮我在 iPadOS 框架中识别这个组件吗？此外，我很好奇它是否特定于 UIKit 或者是否也可以在 SwiftUI 中使用。任何有关有效使用该组件（尤其是带有棘爪）的澄清或指导，将不胜感激。谢谢你。

Answer 1

我不知道有一些类似于工作表的本机组件，但是，您可以使用 SwiftUI 实现非常相似的东西：

struct ContentView: View {
    
    @State var isOpen = true
    
    var body: some View {
        NavigationStack {
            GeometryReader { proxy in
                let size = proxy.size
                ZStack {
                    Map()
                    
                    CustomMapSheet(size: size)
                    
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
    
    @ViewBuilder
    func CustomMapSheet(size: CGSize) -> some View {
        ZStack(alignment: .leading) {
            VStack {
                Text("Content Here")
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(alignment: .top) {
                Capsule()
                    .frame(width: 50, height: 4)
                    .padding(.top)
                    .clipShape(.rect)
                    .gesture(
                        DragGesture()
                            .onChanged({ value in
                                let predictedY = value.predictedEndTranslation.height
                                
                                if predictedY > 400 {
                                    withAnimation(.snappy) {
                                        isOpen = false
                                    }
                                } else if predictedY < 150 {
                                    withAnimation(.snappy) {
                                        isOpen = true
                                    }
                                }
                            })
                    )
            }
        }
        .background(.thickMaterial, in: .rect(cornerRadius: 15, style: .continuous))
        .padding()
        .frame(width: size.width / 2.8, height: isOpen ? size.height : size.height / 8) // <-- This is for the size
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading) // <-- This is to Position it to the leading side
        .offset(y: isOpen ? 0 : (size.height - size.height / 2) - 40) // To take it to the bottom when closed
    }
    
}

你就有了

当然你可以通过多种方式改进它，但我认为这是一个很好的起点。 让我知道你的想法！