将视图扩展到 SwiftUI 中另一个视图的背景

Question

我有一个视图，顶部是一个

Map

，底部是一个圆形

View

，目前，当显示此屏幕时，

Map

视图停止在两个视图相交处，有一个非常明显的间隙，是否有有一种方法可以将两者无缝合并在一起，使地图看起来就像在背景中一样？

VStack {
    Map(position: $position) {
        UserAnnotation()
    }
    .mapStyle(.standard(elevation: .realistic))
    .ignoresSafeArea()

    List {
        ForEach(locationManager.debugMessages, id: \.self) { msg in
            Text(msg)
        }
    }
    .cornerRadius(30)
}

Answer 1

您可以将

List

添加为地图的

safeAreaInset

。

Map {
    UserAnnotation()
}
.mapStyle(.standard(elevation: .realistic))
.safeAreaInset(edge: .bottom) {
    List {
        ForEach(0..<10) {
            Text("\($0)")
        }
    }
    .cornerRadius(30)
    // the list takes up half of the available space
    .containerRelativeFrame(.vertical, count: 2, spacing: 10.0)
}
.ignoresSafeArea()

也就是说，IMO 更好的设计是让

List

成为不断呈现的

sheet

。

Map {
    UserAnnotation()
}
.mapStyle(.standard(elevation: .realistic))
.sheet(isPresented: .constant(true)) {
    List {
        ForEach(0..<10) {
            Text("\($0)")
        }
    }
    .presentationCornerRadius(10)
    .presentationDetents([.medium])
    .interactiveDismissDisabled()
    .presentationDragIndicator(.hidden)
    .presentationBackgroundInteraction(.enabled(upThrough: .medium))
}
.ignoresSafeArea()