How to add background Color to a navigationView in swiftUI

huangapple go评论62阅读模式
英文:

How to add background Color to a navigationView in swiftUI

问题

以下是翻译好的代码部分:

var body: some View {
    NavigationView {
        VStack(spacing: 20) {
            TextField("在此处添加文本...", text: $textFieldText)
                .font(.headline)
                .padding(.leading)
                .frame(height: 55)
                .background(back)
                .cornerRadius(10)
                .padding(.horizontal)
            
            Button(action: {
                guard !textFieldText.isEmpty else { return }
                vm.addFruit(text: textFieldText)
                textFieldText = ""
            }, label: {
                Text("保存")
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .frame(height: 55)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            })
            
            List {
                ForEach(vm.savedEntities) { entity in
                    Text(entity.name ?? "无名称")
                        .onTapGesture {
                            vm.updateFruit(entity: entity)
                        }
                }
                .onDelete(perform: vm.deleteFruit)
            }
            .onAppear() {
                UITableView.appearance().backgroundColor = UIColor.clear
            }
        }
        .navigationTitle("水果")
        .background(Color.red.ignoresSafeArea(.all))
    }
    .navigationViewStyle(StackNavigationViewStyle())
}

希望这能帮助您解决问题。

英文:

I am trying to add a background color to the navigation view but it doesn't apply to the whole view.

var body: some View {
    NavigationView {
        VStack(spacing: 20) {
            TextField("Add text here...", text: $textFieldText)
                .font(.headline)
                .padding(.leading)
                .frame(height: 55)
                .background(back)
                .cornerRadius(10)
                .padding(.horizontal)
            
            Button(action: {
                guard !textFieldText.isEmpty else { return }
                vm.addFruit(text: textFieldText)
                textFieldText = ""
            }, label: {
                Text("Save")
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .frame(height: 55)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            })
            
            List {
                ForEach(vm.savedEntities) { entity in
                    Text(entity.name ?? "NO NAME")
                        .onTapGesture {
                            vm.updateFruit(entity: entity)
                        }
                }
                .onDelete(perform: vm.deleteFruit)
            }
            .onAppear() {
                UITableView.appearance().backgroundColor = UIColor.clear
            }
        }
        .navigationTitle("Fruits")
        .background(Color.red.ignoresSafeArea(.all))
    }
    .navigationViewStyle(StackNavigationViewStyle())
}

}

I have tried several things but none seem to work. Is this a problem for everyone using xcode 14? Also how do I reslove it?

答案1

得分: 1

在这种情况下,您可以使用if语句来在列表为空时有条件地呈现不同的视图。

以下是代码:

if vm.savedEntities.isEmpty {
    EmptyView()
} else {
    List {
        ForEach(vm.savedEntities) { entity in
            Text(entity.name ?? "NO NAME")
                .onTapGesture {
                    vm.updateFruit(entity: entity)
                }
        }
        .listRowBackground(Color.clear)
    }
    .listStyle(InsetListStyle())
    .scrollContentBackground(.hidden)
    .onAppear() {
        UITableView.appearance().backgroundColor = UIColor.clear
    }
}
英文:

In this case you can use the if statement to conditionally render a different view when the list is empty.

Here is the code:

  if vm.savedEntities.isEmpty {
      EmptyView()
  } else {
     List { item in
         ForEach(vm.savedEntities) { entity in
             Text(entity.name ?? "NO NAME")
                 .onTapGesture {
                     vm.updateFruit(entity: entity)
                 }
         }
         .listRowBackground(Color.clear)
     }
     .listStyle(InsetListStyle())
     .scrollContentBackground(.hidden)
     .onAppear() {
         UITableView.appearance().backgroundColor = UIColor.clear
     }
  }

答案2

得分: 0

"...but it doesn't apply to the whole view." 这可能是由于 List 滚动背景引起的,在这种情况下,请尝试这样做:

List {
    ...
}
.scrollContentBackground(.hidden)
.background(Color.red)
英文:

...but it doesn't apply to the whole view., it could be due to the List scroll background, in that case try this:

 List {
    ...
  }
  .scrollContentBackground(.hidden)
  .background(Color.red)

huangapple
  • 本文由 发表于 2023年4月11日 05:51:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/75981007.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定