SwiftUI 自动调整底页大小

Posted 2023-02-24

【中文标题】SwiftUI 自动调整底页大小

【英文标题】：SwiftUI automatically sizing bottom sheet

【发布时间】：2020-08-18 17:03:55

【问题描述】：

有很多 SwiftUI 的底部表格示例，但是它们都指定了表格可以使用 GeometryReader 增长到的某种类型的最大高度。我想要的是创建一个底部表，它的高度仅与其中的内容一样高。我使用首选项键提出了以下解决方案，但必须有更好的解决方案。也许使用某种类型的动态滚动视图是解决方案？

struct ContentView: View
    @State private var offset: CGFloat = 0
    @State private var size: CGSize = .zero

    var body: some View
        ZStack(alignment:.bottom)
            VStack
                Button(offset == 0 ? "Hide" : "Show")
                    withAnimation(.linear(duration: 0.2))
                        if offset == 0
                            offset = size.height
                         else 
                            offset = 0
                        
                    
                
                .animation(nil)
                .padding()
                .font(.largeTitle)
                Spacer()
            
            BottomView(offset: $offset, size: $size)
        .edgesIgnoringSafeArea(.all)
    


struct BottomView: View
    @Binding var offset: CGFloat
    @Binding var size: CGSize

    var body: some View
        VStack(spacing: 0)
            ForEach(0..<5) value in
                Rectangle()
                    .fill(value.isMultiple(of: 2) ? Color.blue : Color.red)
                    .frame(height: 100)
            
        
        .offset(x: 0, y: offset)
        .getSize
            size = $0
            offset = $0.height
        
    


struct SizePreferenceKey: PreferenceKey 
    struct SizePreferenceData 
        let bounds: Anchor<CGRect>
    

    static var defaultValue: [SizePreferenceData] = []

    static func reduce(value: inout [SizePreferenceData], nextValue: () -> [SizePreferenceData]) 
        value.append(contentsOf: nextValue())
    


struct SizePreferenceModifier: ViewModifier 
    let onAppear: (CGSize)->Void

    func body(content: Content) -> some View 
        content
            .anchorPreference(key: SizePreferenceKey.self, value: .bounds, transform:  [SizePreferenceKey.SizePreferenceData( bounds: $0)] )
            .backgroundPreferenceValue(SizePreferenceKey.self)  preferences in
                GeometryReader  geo in
                    Color.clear
                        .onAppear
                            let size = CGSize(width: geo.size.width, height: geo.size.height)
                            onAppear(size)
                        
                
            
    


extension View
    func getSize(_ onAppear: @escaping (CGSize)->Void) -> some View 
        return self.modifier(SizePreferenceModifier(onAppear: onAppear))
    

【问题讨论】：

我现在使用this 方法，它更简洁一些，但它仍然使用偏好键。

【参考方案1】：

谈论过度工程问题。如果要隐藏工作表，则只需将高度指定为 0，而不是在显示时指定高度。另外将框架对齐设置为顶部。

struct ContentView: View
    @State private var hide = false

    var body: some View
        ZStack(alignment: .bottom)
            Color.blue
                .overlay(
                    Text("Is hidden : \(hide.description)").foregroundColor(.white)
                        .padding(.bottom, 200)
                )
                .onTapGesture
                    hide.toggle()
                
            
            VStack(spacing: 0)
                ForEach(0..<5) index in
                    Rectangle()
                        .foregroundColor(index.isMultiple(of: 2) ? Color.gray : .orange)
                        .frame(height: 50)
                        .layoutPriority(2)
                
            
            .layoutPriority(1)
            .frame(height: hide ? 0 : nil, alignment: .top)
            .animation(.linear(duration: 0.2))
        .edgesIgnoringSafeArea(.all)