SwiftUI：自己的ViewModifier不会刷新视图

问题描述

在我的项目中，我有两个颜色选择器，它们可以更改背景颜色和字体颜色。

Sheet，我在其中更改颜色：

  alertManagementForm: FormGroup;
  currentRoleData: any = {};

  boe
  sb: any;
  igm: any;
  egm: any;
  count: number = 0;
  names=[]
  status=[]
  msgText=[]
  msgEmail=[]
  constructor(private userService:UserServiceService,private fb:FormBuilder) { }

  ngOnInit(): void {
    this.initializeform()
    this.data1()
  }
  initializeform() {
    this.alertManagementForm = this.fb.group({
      alert: this.fb.array([
        // this.addServicesFormGroup()
      ])
    })
  }
  addService() {
    for (let i = 0; i < this.count; i++) {
      (<FormArray>this.alertManagementForm.get('alert')).push(this.addBOEFormGroup(i));
    }
    console.log('da1',this.alertManagementForm.get('alert').value);
  
  }
  addBOEFormGroup(index) {
    // this.makeServicesstructure();
    return this.fb.group({
      names: new FormControl(this.names[index]),status: new FormControl(this.status[index]),msgText: new FormControl(this.msgText[index]),msgEmail:new FormControl(this.msgEmail[index]),})
  }
  
  
  data1(){
    this.userService.getUser().subscribe((data)=>{
      // console.log(data['Bill of Entry'])
      this.boe=data['Bill of Entry']
      this.formatBOEData(this.boe)
      console.log(this.boe)
      this.sb=data['Shipping Bill']
      this.igm=data['IGM']
      this.egm=data['EGM']
    })
  }
  formatBOEData(boe){
    for (let i = 0; i < boe.length; i++) {
      this.names.push(boe[i].eventName);
      this.status.push(boe[i].enable)
      this.msgText.push(boe[i].text)
      this.msgEmail.push(boe[i].email)
      this.count += 1;
    }
console.log("name "+this.names)
console.log("status "+this.status)
console.log("msgText "+this.msgText)
console.log("msgEmail "+this.msgEmail)
  }
}

ContentView，应在其中显示更改：

@Observedobject var listColor: ListColor

ColorPicker("Hintergrund",selection: $listColor.bgColor)
                               
ColorPicker("Text",selection: $listColor.textColor)

我也有自己的ViewModifer，它可以更改导航栏的背景颜色和字体颜色。

 @Observedobject private var listColor = ListColor()
 
 vstack{
     vstack{...}
     .backgroundColor(listColor.bgColor)
     .foregroundColor(listColor.textColor)
 }
 .navigationBarTitle(Text("Workout"),displayMode: .automatic)
 .navigationBarColor(backgroundColor: listColor.bgColorNav,titleColor: listColor.textColorNav) // my own viewmodifier
  .navigationBarItems(trailing:
       Button(action: {
             self.showSettings.toggle()
       }) {
             Text("Settings")
                    
       }
       .sheet(isPresented: $showSettings){
            SettingsView(listColor: listColor) //open View with the color pickers
       })

                                    

问题是更改了“常规”背景和字体颜色，但没有更改导航栏中的颜色。我认为问题是我自己的导航栏ViewModifier无法重新加载视图。我将颜色保存在UserDefaults中。当我再次启动该应用程序时，更改将显示在导航栏中。

解决方法

声明在Color对象上的绑定，而不是在ViewModifier中使用普通变量。然后，如果您包装的值发生变化，则视图（在本例中为NavigationBar）将自动重绘。

我的工作示例：

import SwiftUI

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: Binding<Color>

    init(backgroundColor: Binding<Color>) {
        self.backgroundColor = backgroundColor
    }

    func body(content: Content) -> some View {
        ZStack{
            content
            VStack {
                GeometryReader { geometry in
                    self.backgroundColor.wrappedValue
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
            }
        }
    }
}

extension View {
    func navigationBarColor(_ bgColor: Binding<Color>) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: bgColor))
    }
}

struct ContentView: View {
    @State private var bgColor = Color(.sRGB,red: 0.98,green: 0.9,blue: 0.2)
    
    var body: some View {
        NavigationView {
            ColorPicker("NavigationBar background color",selection: $bgColor)
                .navigationBarTitle("Title",displayMode: .large)
                .navigationBarColor(self.$bgColor)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}