Question

I am trying to recreate a Maps-style UI with a persistent bottom sheet and controls fixed above.

☝️ Example here, the "Look Around" binoculars button and AQI from Apple Maps follow the movement of the sheet.

I ve got my sheet set up but I m curious what the approach for this would be?

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            HomeView()
                .sheet(isPresented: .constant(true)) {
                    ActivityView()
                        .presentationDetents([.medium, .large, .height(80)])
                        .presentationCornerRadius(Constants.cornerRadius)
                        .presentationBackgroundInteraction(.enabled)
                        .interactiveDismissDisabled(true)
                }
        }
    }
}

Answer 1

To achieve your purpose, it is recommended to utilize a custom SheetView. The following example demonstrates the customization of a SheetView with transitions and animations:

Hope it helps you.

import SwiftUI

struct SheetView: View {
    @State var isShowCustomSheetView: Bool = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Button {
                    isShowCustomSheetView.toggle()
                } label: {
                    Text("Show Custom Sheet View")
                }
                Spacer()
            }
            
            if isShowCustomSheetView {
                CustomSheetView()
                    .frame(height: 400)
                    .transition(.move(edge: .bottom))
                    .animation(.easeInOut)
            }
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

struct CustomSheetView: View {
    
    var body: some View {
        VStack(spacing: 20) {
            HStack {
                Button {
                } label: {
                    Image(systemName: "binoculars.fill")
                }
                
                Spacer()
                
                Button {
                } label: {
                    Image(systemName: "sun.dust.fill")
                }
            }
            .padding(.horizontal)
            
            VStack {
                RoundedRectangle(cornerRadius: 2)
                    .fill(.gray)
                    .frame(width: 50, height: 5)
                    .padding(.top)
                
                Spacer()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.black.opacity(0.6))
            .clipShape(RoundedRectangle(cornerRadius: 15))
        }
    }
}

struct SheetView_Previews: PreviewProvider {
    static var previews: some View {
        SheetView()
    }
}

友情链接