Overlay a color over SwiftUI view? - swift

Question

For my SwiftUI notes app, I would like to overlay a color over the entire view, but I've only been able to cover half off the screen with the color. Other attempts at setting the color and an overlay has only resulted in errors so far. Is there a solution to this? Or should go about this another way? Image has been provided as well. 1
import SwiftUI
let dateFormatter2 = DateFormatter()
struct NoteItem2: Codable, Hashable, Identifiable {
let id: Int
let text: String
var date = Date()
var dateText: String {
dateFormatter.dateFormat = "h:mm a"
return dateFormatter.string(from: date)
}
}
struct green_screen : View {
#State var items: [NoteItem] = {
guard let data = UserDefaults.standard.data(forKey: "notes") else { return [] }
if let json = try? JSONDecoder().decode([NoteItem].self, from: data) {
return json
}
return []
}()
#State var taskText: String = ""
#State var showAlert = false
#State var itemToDelete: NoteItem?
var alert: Alert {
Alert(title: Text("Hey!"),
message: Text("Are you sure you want to delete this item?"),
primaryButton: .destructive(Text("Delete"), action: deleteNote),
secondaryButton: .cancel())
}
var inputView: some View {
Color.green
.overlay(
HStack {
TextField("Write a note for yourself...", text: $taskText)
.padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
.clipped()
Button(action: didTapAddTask, label: { Text("Add") }).padding(8)
})
.edgesIgnoringSafeArea(.all)
}
var body: some View {
VStack {
inputView
Divider()
List(items) { item in
VStack(alignment: .leading) {
Text(item.dateText).font(.headline)
Text(item.text).lineLimit(nil).multilineTextAlignment(.leading)
}
.onLongPressGesture {
self.itemToDelete = item
self.showAlert = true
}
}
.alert(isPresented: $showAlert, content: {
alert
})
}
}
func didTapAddTask() {
let id = items.reduce(0) { max($0, $1.id) } + 1
items.insert(NoteItem(id: id, text: taskText), at: 0)
taskText = ""
save()
}
func deleteNote() {
guard let itemToDelete = itemToDelete else { return }
items = items.filter { $0 != itemToDelete }
save()
}
func save() {
guard let data = try? JSONEncoder().encode(items) else { return }
UserDefaults.standard.set(data, forKey: "notes")
}
}
struct green_screen_Previews: PreviewProvider {
static var previews: some View {
green_screen()
}
}

Answer 1

First you have to add green color to entire view instead of the inputView.
var inputView: some View {
GeometryReader{ geo in
HStack {
TextField("Write a note for yourself...", text: $taskText)
.padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
.clipped()
Button(action: didTapAddTask, label: { Text("Add") }).padding(8)
}
.frame( height: geo.size.height/2)
}
}
and main view
VStack {
inputView
Divider()
List(items) { item in
VStack(alignment: .leading) {
Text(item.dateText).font(.headline)
Text(item.text).lineLimit(nil).multilineTextAlignment(.leading)
}
.onLongPressGesture {
self.itemToDelete = item
self.showAlert = true
}
}
.listRowBackground(Color.green)
.alert(isPresented: $showAlert, content: {
alert
})
}
.background(Color.green) // <-- here
.ignoresSafeArea() // <-- here
after this modification also you cannot see the color overlay on entire screen because of SwiftUI list block the view color from it's default background color.so you need to change it clear color,
init() {
UITableView.appearance().separatorStyle = .none
UITableViewCell.appearance().backgroundColor = .clear
UITableView.appearance().backgroundColor = .clear
}