Swiftui：叠加 - 圆角或

Question

我想在视图底部创建一个覆盖层，该覆盖层具有圆角顶角并覆盖安全区域。我试过了

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

此方法显示圆角，但底部的安全区域未被覆盖。当我删除clipShape时，安全区域被覆盖，但角不再是圆的......我如何将两者结合起来？

谢谢！

Answer 1

您可以使用

clipShape

代替

mask

。在那里，您可以使用忽略安全区域的视图。

// replace .clipShape(...) with...
.mask {
    UnevenRoundedRectangle(topLeadingRadius: 10, topTrailingRadius: 10)
        .ignoresSafeArea()
}

Answer 2

尝试将剪辑形状应用到背景，然后添加

.ignoresSafeArea()

:

HStack {
    // ...
}
.frame(maxWidth: .infinity, maxHeight: sheetHeight)
.padding()
.background {
    Color.gray
        .clipShape(
            .rect(
                topLeadingRadius: 10,
                bottomLeadingRadius: 0,
                bottomTrailingRadius: 0,
                topTrailingRadius: 10
            )
        )
        .ignoresSafeArea()
}