SwiftUI自动调整底部工作表的大小

问题描述

SwiftUI的底部工作表有很多示例，但是它们都指定了可以使用GeometryReader扩展为工作表最大高度的某种类型。我想要创建一个底纸，该底纸的高度仅与其中的内容一样高。我已经使用偏好键提出了以下解决方案，但是必须有更好的解决方案。也许使用某种类型的动态scrollView是解决方案？

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

解决方法

讨论过度设计问题。您要做的就是如果要隐藏工作表，则将高度指定为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)
    }
}