White rectangle shows infront of the text I write

Question

I'm creating a travel diary app. When I write my details about the city I visit, I'm met with a white rectangle below the name of the city instead of what I've written. I would like to be able to see what I've written down below the name.

This is what I write for example:

This is the results I don't want to see:

This is my code right now. Can anybody help me?

struct LandingView: View {
    @State private var oldLandingName: String = ""
    @State private var newLandingName: String = ""
    @State private var isAddingLanding = false
    @State private var landings: [String] = []
    @State private var isEditing = false
    @State private var landingDetails: [String: [String]] = [:]
    @State private var newLandingDetails: String = ""

    var body: some View {
        NavigationView {
            ZStack {
                Color.blue.ignoresSafeArea()
                Circle()
                    .scale(1.7)
                    .foregroundColor(.yellow.opacity(0.60))
                    .padding()
                Circle()
                    .scale(1.3)
                    .foregroundColor(.blue.opacity(0.50))
                    .padding()
                VStack {
                    HStack {
                        Text("Add Your Travels")
                            .bold()
                        Spacer()
                        Button(action: {
                            isAddingLanding = true
                        }) {
                            Image(systemName: "plus")
                                .resizable()
                                .frame(width: 20, height: 20)
                                .foregroundColor(.white)
                        }
                    }
                    .padding(.horizontal)

                    List(landings, id: \.self) { landing in
                        Text(landing).bold()
                            .foregroundColor(.white)
                            .listRowBackground(Color.clear)
                            .listRowSeparatorTint(.blue)
                            .onTapGesture {
                                self.isEditing = true
                                self.oldLandingName = landing
                                self.newLandingName = landing
                            }
                        if let details = landingDetails[landing] {
                            ForEach(details, id: \.self) { detail in
                                Text(detail)
                                    .foregroundColor(.white)
                            }
                        }
                    }
                    .listStyle(.plain)
                }
            }
            .navigationBarTitle(Text("Landings!"))

            .fullScreenCover(isPresented: $isAddingLanding, onDismiss: {}) {
                VStack {
                    TextField("Where did you go? \(newLandingName)", text: $newLandingName)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()
                    TextField("Details", text: $newLandingDetails)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()
                    Button("Add") {
                        if !newLandingName.isEmpty {
                            landings.append(newLandingName)
                            // newLandingName = ""
                            if !landingDetails.keys.contains(newLandingName) {
                                landingDetails[newLandingName] = []
                            }
                            if let details = landingDetails[newLandingName], !newLandingDetails.isEmpty {
                                landingDetails[newLandingName]?.append(newLandingDetails)
                                // newLandingDetails = ""
                            }
                            newLandingName = ""
                            newLandingDetails = ""
                        }
                        isAddingLanding = false
                    }
                    Color.blue.ignoresSafeArea()
                }
            }
            .fullScreenCover(isPresented: $isEditing, onDismiss: {}) {
                VStack {
                    TextField("", text: $newLandingName)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()

                    Button("Add Photos") {}
                    Spacer()
                    Button("Write about it") {
                        if !newLandingName.isEmpty {
                            if let idx = landings.firstIndex(where: { $0 == $oldLandingName.wrappedValue }) {
                                self.landings[idx] = newLandingName
                                if !landingDetails.keys.contains(newLandingName) {
                                    landingDetails[newLandingName] = []
                                }
                            }
                        }
                        isEditing = false
                    }
                    Color.blue.ignoresSafeArea()
                }
                // .padding()
            }
        }
    }
}

Does this answer your question? https://stackoverflow.com/questions/56517904/how-do-i-modify-the-background-color-of-a-list-in-swiftui — jnpdx, May 11 '23 at 20:50

score 0 · Answer 1 · edited May 13 '23 at 01:34

I think you should debug your code first. So the one you are referring a Blank white cell, it's not blank it's having a detailed value that you are adding in your code with the second loop. If you remove these lines from your code. It should work.

if let details = landingDetails[landing] {
    ForEach(details, id: \.self) { detail in
        Text(detail)
            .foregroundColor(.white)
    }
}

White rectangle shows infront of the text I write

1 Answers1