在 SwiftUI 视图上叠加颜色？

Question

对于我的 SwiftUI 笔记应用程序，我想在整个视图上覆盖一种颜色，但我只能用该颜色覆盖屏幕的一半。到目前为止，设置颜色和覆盖层的其他尝试仅导致错误。有针对这个的解决方法吗？或者应该以另一种方式解决这个问题？还提供了图像。 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

首先，您必须向整个视图而不是 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)
        }

    }

和主视图

    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

在此修改之后，您也无法在整个屏幕上看到颜色叠加，因为 SwiftUI 列表阻止了视图颜色的默认背景颜色。因此您需要将其更改为透明颜色，

init() {
   UITableView.appearance().separatorStyle = .none
   UITableViewCell.appearance().backgroundColor = .clear
   UITableView.appearance().backgroundColor = .clear
}