问题

根据下面的UI界面，似乎在VStack上叠加了一个带有圆形的正方形，如何去除白色的背景部分？

UI:

SwiftUI 代码:

import SwiftUI

struct PresenzeUiView: View {
    @Binding var users: [UserTable]
    @State private var progressbarui = 20.0
    @State private var dettaglioPresenzaShow = false
    
    func getDate() -> String {
        let MyFormatter = DateFormatter()
        MyFormatter.dateFormat = "dd/MM/YYYY"
        var date = MyFormatter.string(from: Date())
        return "" + date
    }
    
    var body: some View {
        VStack {
            VStack(alignment: .leading) {
                Text("Oggi").multilineTextAlignment(.leading).colorInvert()
                    .font(.title2)
                    .fixedSize()
                Text(getDate())
                    .multilineTextAlignment(.leading).colorInvert()
                    .font(.subheadline)
                    .fixedSize()
                
                Text("Personale non in attività")
                    .multilineTextAlignment(.leading).colorInvert()
                    .font(.subheadline)
                    .fixedSize().padding(.top, 10)
                
                ProgressView("", value: progressbarui, total: 100).accentColor(Color.red).frame(height: 80)
                
            }.frame(width: 250).cornerRadius(20)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 20)
                        .stroke(.white, lineWidth: 5)
                )
            
        }.background(Color.white).frame(width: UIScreen.screenWidth - 300, height: UIScreen.screenHeight)
    }
}

<details>
<summary>英文:</summary>

as you see from the ui below there seems to be a square superimposed on a vstack with a round how to remove the white back part?

**UI:**
[![enter image description here][1]][1]
**SwitUi Code:**


    import SwiftUI
    
    struct PresenzeUiView: View {
        @Binding var users: [UserTable]
        @State private var progressbarui = 20.0
        @State private var dettaglioPresenzaShow = false
        
        func getDate() -&gt; String {
            let MyFormatter = DateFormatter()
            MyFormatter.dateFormat = &quot;dd/MM/YYYY&quot;
            var date = MyFormatter.string(from: Date())
            return &quot;&quot; + date
        }
        
        var body: some View {
            VStack {
                VStack(alignment: .leading) {
                    Text(&quot;Oggi&quot;).multilineTextAlignment(.leading).colorInvert()
                        .font(.title2)
                        .fixedSize()
                    Text(getDate())
                        .multilineTextAlignment(.leading).colorInvert()
                        .font(.subheadline)
                        .fixedSize()
                    
                    Text(&quot;Personale non in attivit&#224;&quot;)
                        .multilineTextAlignment(.leading).colorInvert()
                        .font(.subheadline)
                        .fixedSize().padding(.top, 10)
                    
                    ProgressView(&quot;&quot;, value: progressbarui, total: 100).accentColor(Color.red).frame(height: 80)
                    
                }.frame(width: 250).cornerRadius(20)
                    .padding()
                    .overlay(
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(.white, lineWidth: 5)
                    )
                
            }.background(Color.white).frame(width: UIScreen.screenWidth - 300, height: UIScreen.screenHeight)
        }
    }


  [1]: https://i.stack.imgur.com/U6EbY.jpg

</details>


# 答案1
**得分**: 1

两个注意事项：

1. 您当前有两个嵌套的`VStack`。您正在将圆角添加到内部的一个，并在外部的一个上设置背景。如果您需要外部的`VStack`，请确保也在外部的一个上设置形状。如果不需要外部的`VStack`，考虑删除外部的一个，并在剩下的一个上设置背景。**请确保在裁剪形状之前设置背景！**

2. 使用`clipShape(RoundedRectangle(cornerRadius: 20))`而不是`overlay(RoundedRectangle(cornerRadius: 20))`。使用`overlay`会在第一个视图上创建一个次要视图，这就是为什么您仍然可以看到原始视图的原因。

<details>
<summary>英文:</summary>

Two notes: 

 1. You currently have two nested `VStack`s. You&#39;re adding the rounded corners to the inner one and setting the background on the outer one. If you need the outer `VStack`, make sure you set the shape on the outer one as well. If not, consider removing the outer one and setting the background on the one that&#39;s left. **Make sure you set the background _before_ clipping the shape!**

 2. Use `clipShape(RoundedRectangle(cornerRadius: 20))` instead of `overlay(RoundedRectangle(cornerRadius: 20))`. Using `overlay` creates a secondary View over the first one, which is why you can still see the original view underneath.

</details>