swiftuisafearea

Swiftui: Overlay - either rounded corners or


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!


Solution

  • 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()
    }