在哪里放置浮动按钮以根据呈现的工作表动态高度向上/向下移动？

Question

我是 SwiftUI 新手。我想在地图上放置一个浮动按钮，但这需要根据底部呈现表移动。底部当前的纸张高度将是动态的，并且它将根据向上/向下滑动来最小化和最大化。

以下是图片供您参考：

这是示例代码：

Map {
       Annotation("", coordinate: CLLocationCoordinate2D(latitude: Double(deviceViewModel.currentDevice.lat) ?? 0,
                                                                  longitude: Double(deviceViewModel.currentDevice.lng) ?? 0)) {
            DropPinView(deviceViewModel: deviceViewModel)
         }
     }
     .sheet(isPresented: .constant(true)) {
        MapTabSheetView()
           .presentationDetents([.fraction(0.1), .fraction(0.3)])
           .presentationCornerRadius(32)
           .presentationDragIndicator(.automatic)
           .presentationBackgroundInteraction(.enabled(upThrough: .fraction(0.3)))
           .interactiveDismissDisabled()
     }

Answer 1

您可以将它们作为

sheet

的一部分，然后只需制作背景

clear

。

.presentationBackground(content: {
                    Color.clear
                })
.presentationDragIndicator(.hidden)

这是一个例子。

import SwiftUI
import MapKit
struct MapSetupView: View {
    var body: some View {
        Map()
            .sheet(isPresented: .constant(true)) {
                VStack {
                    //Buttons
                    HStack {
                        Button("", systemImage: "person") {
                            
                        }.buttonStyle(.borderedProminent)
                        Spacer()
                        Button("", systemImage: "checkmark") {
                            
                        }.buttonStyle(.borderedProminent)
                    }.frame(height: 50)
                    //Sheet
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color(UIColor.systemBackground))
                        .shadow(radius: 5)
                }
                .presentationDetents([.fraction(0.2), .large])
                
                .presentationBackground(content: {
                    Color.clear
                })
                .presentationDragIndicator(.hidden)
                .ignoresSafeArea()
            }
    }
}

#Preview {
    MapSetupView()
}