NavigationView + TextField背景

Question

我目前正在学习SwiftUI并构建待办事项列表应用程序。在ContentView屏幕上，我有一个NavigationView和一个按钮，该按钮将“添加新任务”文本字段弹出到列表中。我怀疑这不是实现此目的的正确方法，但是当文本字段显示出来时，背景色就不会持久。为了我的一生，我不知道如何设置背景颜色。如果将文本字段移到NavigationView之外，则可以设置背景，但是当NavigationView移位以为文本字段腾出空间时，会出现一堆黑屏闪烁。关于如何在添加到列表中时如何在文本字段上设置背景色或在移出文本框时如何解决屏幕闪烁的想法？感谢帮助。

import SwiftUI
import UIKit

struct ContentView: View {

@Environment(\.managedObjectContext) var managedObjectContext
@FetchRequest(entity: ToDoItem.entity(), sortDescriptors: [NSSortDescriptor(key: "order", ascending: true)]) var listItems: FetchedResults<ToDoItem>

@State private var newToDoItem = ""
@State private var showNewTask = false
@State var isEditing = false
@State var showTaskView = false
@State var bottomState = CGSize.zero
@State var showFull = false
@State var deleteButton = false

//this removes the lines in the list view
init() {
    // To remove only extra separators below the list:
    UITableView.appearance().tableFooterView = UIView()

    // To remove all separators including the actual ones:
    UITableView.appearance().separatorStyle = .none

    UIScrollView.appearance().backgroundColor = .clear
    //UITableView.appearance().backgroundColor = .clear
}

var body: some View {
    ZStack{
        VStack{
            TitleView()

            NavigationView {
                List {
                    if showNewTask {
                        HStack{
                            TextField("New task", text: self.$newToDoItem, onEditingChanged: { (changed) in
                            }) {
                                print("onCommit")
                                self.addTask(taskTitle: self.newToDoItem)
                                self.saveTasks()
                                self.showNewTask.toggle()
                                self.newToDoItem = ""
                            }
                            .font(Font.system(size: 18, weight: .bold))
                            .foregroundColor(Color("Text"))

                            Button(action: {
                                self.newToDoItem = ""
                                self.showNewTask.toggle()
                            }) {
                                Image(systemName: "xmark.circle").foregroundColor(Color("button"))
                                    .font(Font.system(size: 18, weight: .bold))
                            }
                        }
                        .padding(EdgeInsets(top: 8, leading: 6, bottom: 8, trailing: 6))
                        .background(Color("addNewTask"))
                        .cornerRadius(10.0)
                    }

                    ForEach(listItems, id: \.self) {item in
                        HStack {
                            Button(action: {
                                item.isComplete = true
                                self.saveTasks()
                                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5){
                                    self.deleteTaskTest(item: item)
                                }
                            }) {
                                if (item.isComplete) {
                                    Image(systemName: "checkmark.circle")
                                        .font(Font.system(size: 25, weight: .bold))
                                        .foregroundColor(Color(#colorLiteral(red: 0.1616941956, green: 0.9244045403, blue: 0.1405039469, alpha: 1)))
                                        .padding(.trailing, 4)
                                } else {
                                    Image(systemName: "circle")
                                        .font(Font.system(size: 25, weight: .bold))
                                        .foregroundColor(Color("button"))
                                        .padding(.trailing, 4)
                                }
                            }
                            .buttonStyle(PlainButtonStyle())

                            ToDoItemView(title: item.title, createdAt: "\(item.createdAt)")
                                .onTapGesture {
                                    self.showTaskView.toggle()
                            }
                            .onLongPressGesture(minimumDuration: 0.1) {
                                self.isEditing.toggle()
                                print("this is a long press test")
                            }
                        }
                        .listRowBackground(Color("background"))
                    }
                    .onMove(perform: moveItem)
                    .onDelete(perform: deleteTask)
                }
                .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring())
                .navigationBarTitle(Text("ToDay"), displayMode: .large)
                .navigationBarHidden(true)
                .background(Color("background"))
            }

            //ADD A NEW TASK BUTTON
            HStack {
                Spacer()
                Button(action: {
                    self.showNewTask.toggle()
                }) {
                    Image(systemName: "plus")
                        .font(.system(size: 18, weight: .bold))
                        .frame(width: 36, height: 36)
                        .background(Color("button"))
                        .foregroundColor(.white)
                        .clipShape(Circle())
                        .shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 5)

                }
            }
            .padding()
        }
        .blur(radius: showTaskView ? 20 : 0)
        .animation(.default)
        .padding(.top, 30)

        //BOTTOM CARD VIEW
        TaskView()
            .offset(x: 0, y: showTaskView ? 360 : 1000)
            .offset(y: bottomState.height)
            .animation(.timingCurve(0.2, 0.8, 0.2, 1, duration: 0.5))
            .gesture(
                DragGesture().onChanged { value in
                    self.bottomState = value.translation
                    if self.showFull {
                        self.bottomState.height += -300
                    }

                    if self.bottomState.height < -300 {
                        self.bottomState.height = -300
                    }

                } .onEnded { value in
                    if self.bottomState.height > 50 {
                        self.showTaskView = false
                    }
                    if (self.bottomState.height < -100 && !self.showFull) || (self.bottomState.height < -250 && self.showFull){
                        self.bottomState.height = -300
                        self.showFull = true
                    } else {
                        self.bottomState = .zero
                        self.showFull = false
                    }
                }
        )
    }
    .background(Color("background").edgesIgnoringSafeArea(.all))
}

Answer 1

最后使它起作用。无论出于什么原因，对堆栈进行修复都可以修复它。

struct ContentView: View {

@Environment(\.managedObjectContext) var managedObjectContext
@FetchRequest(entity: ToDoItem.entity(), sortDescriptors: [NSSortDescriptor(key: "order", ascending: true)]) var listItems: FetchedResults<ToDoItem>

@State private var showCancelButton: Bool = false
@State private var newToDoItem = ""
@State private var showNewTask = false
@State var isEditing = false
@State var showTaskView = false
@State var bottomState = CGSize.zero
@State var showFull = false
@State var deleteButton = false

var itemName = ""

init() {
    // To remove all separators including the actual ones:
    UITableView.appearance().separatorStyle = .none

    UITableView.appearance().backgroundColor = .clear
}

var body: some View {
    ZStack {
        VStack {
            NavigationView {
                VStack {
                    TitleView()
                        .padding(.top, 20)
                        .background(Color("background"))

                    // Enter new task view
                    if showNewTask {
                        HStack {
                            HStack {
                                TextField("New task", text: self.$newToDoItem, onEditingChanged: { (changed) in
                                }) {
                                    self.addTask(taskTitle: self.newToDoItem)
                                    self.saveTasks()
                                    self.showNewTask.toggle()
                                    self.newToDoItem = ""
                                }
                                .font(Font.system(size: 18, weight: .bold))
                                .foregroundColor(Color("Text"))

                                Button(action: {
                                    self.newToDoItem = ""
                                    self.showNewTask.toggle()
                                }) {
                                    Image(systemName: "xmark.circle").foregroundColor(Color("button"))
                                        .font(Font.system(size: 18, weight: .bold))
                                }
                            }
                            .padding(EdgeInsets(top: 8, leading: 6, bottom: 8, trailing: 6))
                            .background(Color("addNewTask"))
                            .cornerRadius(10.0)

                        }
                        .background(Color("background"))
                        .padding(.horizontal)
                    }

                    List {
                        ForEach(listItems, id: \.self) {item in
                            HStack {
                                Button(action: {
                                    item.isComplete = true
                                    self.saveTasks()
                                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5){
                                        self.deleteTaskTest(item: item)
                                    }
                                }) {
                                    if (item.isComplete) {
                                        Image(systemName: "checkmark.circle")
                                            .font(Font.system(size: 25, weight: .bold))
                                            .foregroundColor(Color(#colorLiteral(red: 0.1616941956, green: 0.9244045403, blue: 0.1405039469, alpha: 1)))
                                            .padding(.trailing, 4)
                                    } else {
                                        Image(systemName: "circle")
                                            .font(Font.system(size: 25, weight: .bold))
                                            .foregroundColor(Color("button"))
                                            .padding(.trailing, 4)
                                    }
                                }
                                .buttonStyle(PlainButtonStyle())

                                ToDoItemView(title: item.title, createdAt: "\(item.createdAt)")
                                .onTapGesture {
                                    //item.title = self.itemName
                                    self.showTaskView.toggle()
                                }
                                .onLongPressGesture(minimumDuration: 0.1) {
                                    self.isEditing.toggle()
                                    print("this is a long press test")
                                }
                            }
                            .listRowBackground(Color("background"))
                        }
                        .onMove(perform: moveItem)
                        .onDelete(perform: deleteTask)
                    }
                    .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring())
                    .navigationBarTitle(Text("ToDay"), displayMode: .large)
                    .navigationBarHidden(true)
                    .background(Color("background"))
                }
                .background(Color("background").edgesIgnoringSafeArea(.all))
            }

            HStack {
                Spacer()
                Button(action: {
                    //withAnimation(){
                    self.showNewTask.toggle()
                    //}
                }) {
                    Image(systemName: "plus")
                        .font(.system(size: 18, weight: .bold))
                        .frame(width: 36, height: 36)
                        .background(Color("button"))
                        .foregroundColor(.white)
                        .clipShape(Circle())
                        .shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 5)

                }
            }
            .padding()
        }
        .blur(radius: showTaskView ? 20 : 0)

        //BOTTOM CARD VIEW
        TaskView()
            .offset(x: 0, y: showTaskView ? 360 : 1000)
            .offset(y: bottomState.height)
            .animation(.timingCurve(0.2, 0.8, 0.2, 1, duration: 0.5))
            .gesture(
                DragGesture().onChanged { value in
                    self.bottomState = value.translation
                    if self.showFull {
                        self.bottomState.height += -300
                    }

                    if self.bottomState.height < -300 {
                        self.bottomState.height = -300
                    }

                } .onEnded { value in
                    if self.bottomState.height > 50 {
                        self.showTaskView = false
                    }
                    if (self.bottomState.height < -100 && !self.showFull) || (self.bottomState.height < -250 && self.showFull){
                        self.bottomState.height = -300
                        self.showFull = true
                    } else {
                        self.bottomState = .zero
                        self.showFull = false
                    }
                }
        )
    }
    .animation(.default)
    .background(Color("background").edgesIgnoringSafeArea(.all))
}

func moveItem(indexSet: IndexSet, destination: Int){
    let source = indexSet.first!
    if source < destination {
        var startIndex = source + 1
        let endIndex = destination - 1
        var startOrder = listItems[source].order
        while startIndex <= endIndex {
            listItems[startIndex].order = startOrder
            startOrder = startOrder + 1
            startIndex = startIndex + 1
        }
        listItems[source].order = startOrder
    } else if destination < source {
        var startIndex = destination
        let endIndex = source - 1
        var startOrder = listItems[destination].order + 1
        let newOrder = listItems[destination].order
        while startIndex <= endIndex {
            listItems[startIndex].order = startOrder
            startOrder = startOrder + 1
            startIndex = startIndex + 1
        }
        listItems[source].order = newOrder
    }
    saveTasks()
    self.isEditing.toggle()
}

func deleteTask(indexSet: IndexSet){
    let source = indexSet.first!
    let listItem = listItems[source]
    //self.deleteButton.toggle()
    managedObjectContext.delete(listItem)
    saveTasks()
}

func deleteTaskTest(item: ToDoItem){
    managedObjectContext.delete(item)
    saveTasks()
}

func addTask(taskTitle: String) {
    let newTask = ToDoItem(context: managedObjectContext)
    newTask.title = taskTitle
    newTask.order = (listItems.last?.order ?? 0) + 1
    newTask.createdAt = Date()
}

func saveTasks() {
    do {
        try managedObjectContext.save()
    } catch {
        print(error)
    }
}