I would like to create a overlay at the bottom of the view that has rounded top corners and covers the safe area also. I tried
NavigationStack {
ScrollView {
LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) {
}
.padding(.horizontal)
Text("Dunno").font(.title).padding(.vertical)
LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) {
}
.padding(.horizontal)
}
.navigationTitle("App")
.safeAreaInset(edge: .bottom, spacing: 0) {
VStack {
Rectangle()
.frame(width: 70, height: 3)
.foregroundColor(Color.white)
.padding()
HStack {
TextField("Dunno", text: $searchText)
Button("Test")
LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) {
}
Spacer()
}
.frame(maxWidth: .infinity, maxHeight: sheetHeight)
.padding()
.background(.gray)
.clipShape(
.rect(
topLeadingRadius: 10,
bottomLeadingRadius: 0,
bottomTrailingRadius: 0,
topTrailingRadius: 10
)
)
}
}
This approach displays rounded corners but the safe area at the bottom isn't covered. When I remove the clipShape, the safe area is covered but the corners are no longer rounded.... How can I combine both?
Thanks!
Instead of a clipShape
, you can use a mask
. There, you can use a view that ignores the safe area.
// replace .clipShape(...) with...
.mask {
UnevenRoundedRectangle(topLeadingRadius: 10, topTrailingRadius: 10)
.ignoresSafeArea()
}