RoundedRectangle 背景留下一個未着色的間隙

Question

我想做一個顯示所有信息的 RoundedRectangle，在它下面有一個數據列表。 目標是讓它看起來像一張卡片，但是當我改變背景時，它會留下一個奇怪的白色間隙，它不會改變顏色。 我已經嘗試為每一層更改背景顏色、前景色、強調色以及我所知道的所有內容，但我找不到問題...

在這種情況下，我將 RoundedRectangle.background 設為綠色，以使其更加明顯。

應用程序的圖片，箭頭已編輯！

```var body: some View {
    NavigationView {
        VStack(alignment: .center) {
            ZStack {
                RoundedRectangle(cornerRadius: 25)
                .padding()
                .foregroundColor(.white)
                .background(Color.green)
                .frame(width: nil, height: 250)
                VStack {
                    Text("Verfügbar")
                        .foregroundColor(.gray)
                        .italic()
                        .font(.title2)
                    Text("\(totalMoneyToday(), specifier: "%.2f")€")
                        .foregroundColor(.blue)
                        .bold()
                        .font(.largeTitle)
                    HStack {
                        Spacer()
                        VStack(alignment: .leading) {
                            Text("Einkommen")
                                .foregroundColor(.gray)
                                .italic()
                            HStack {
                        Label("", systemImage: "arrow.up.circle")
                            .foregroundColor(.green)
                                Text("\(posMoney(), specifier: "%.2f")€").bold()
                            }
                        }
                        Spacer()
                        VStack(alignment: .trailing) {
                            Text("Ausgaben")
                                .foregroundColor(.gray)
                                .italic()
                            HStack {
                        Label("", systemImage: "arrow.down.circle")
                            .foregroundColor(.red)
                                Text("\(negMoney(), specifier: "%.2f")€").bold()
                            }
                        }
                        Spacer()
                    }
                    .padding(5)
                }
            }.background(Color.red)
            List {
                ForEach(money) { money in
                    NavigationLink(destination: EditMoneyView(money: money)) {
                        HStack {
                            VStack(alignment: .leading, spacing: 6) {
                                Text(money.name!)
                                    .bold()
                                
                                Text("\(money.amount, specifier: "%.2f")") + Text("€")
                            }
                            Spacer()
                            Text("\(money.date!, style: .date)")
                                .foregroundColor(.gray)
                                .italic()
                        }
                    }
                }
                .onDelete(perform: deleteMoney)
            }
        }
        .navigationBarTitle("Financist", displayMode: .inline)
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button {
                    showingAddView.toggle()
                } label: {
                    Label("Hinzufügen", systemImage: "plus.circle")
                }
            }
        }
        .sheet(isPresented: $showingAddView) {
            AddMoneyView()
        }
    }
}```

十分感謝大家！

Answer 1

這是你的 ZStack 背景。

    var body: some View {
        NavigationView {
            VStack(alignment: .center) {
                ZStack {
                    RoundedRectangle(cornerRadius: 25)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.green)
                    .frame(width: nil, height: 250)
                    VStack {
                        Text("Verfügbar")
                            .foregroundColor(.gray)
                            .italic()
                            .font(.title2)
                        Text("Money")
                            .foregroundColor(.blue)
                            .bold()
                            .font(.largeTitle)
                        HStack {
                            Spacer()
                            VStack(alignment: .leading) {
                                Text("Einkommen")
                                    .foregroundColor(.gray)
                                    .italic()
                                HStack {
                            Label("", systemImage: "arrow.up.circle")
                                .foregroundColor(.green)
                                    Text("money").bold()
                                }
                            }
                            Spacer()
                            VStack(alignment: .trailing) {
                                Text("Ausgaben")
                                    .foregroundColor(.gray)
                                    .italic()
                                HStack {
                            Label("", systemImage: "arrow.down.circle")
                                .foregroundColor(.red)
                                    Text("money").bold()
                                }
                            }
                            Spacer()
                        }
                        .padding(5)
                    }
                }.background(Color.red)
                List {
//                    ForEach(money) { money in
//                        NavigationLink(destination: EditMoneyView(money: money)) {
//                            HStack {
//                                VStack(alignment: .leading, spacing: 6) {
//                                    Text(money.name!)
//                                        .bold()
//
//                                    Text("\(money.amount, specifier: "%.2f")") + Text("€")
//                                }
//                                Spacer()
//                                Text("\(money.date!, style: .date)")
//                                    .foregroundColor(.gray)
//                                    .italic()
//                            }
//                        }
//                    }
//                    .onDelete(perform: deleteMoney)
                }
            }
            .navigationBarTitle("Financist", displayMode: .inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
//                        showingAddView.toggle()
                        print("DEBUG: Button")
                    } label: {
                        Label("Hinzufügen", systemImage: "plus.circle")
                    }
                }
            }
            .background(.red) // added this
//            .sheet(isPresented: $showingAddView) {
//                AddMoneyView()
//            }
        }

    }

Answer 2

我認為這只是默認間距，將其設為零

NavigationView {
    VStack(alignment: .center, spacing: 0) {   << here !!