1

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

1 回答 1

5

谈论过度工程问题。如果要隐藏工作表，则只需将高度指定为 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)
    }
}
于 2020-08-19T14:29:59.013 回答