SwiftUI中Sheet视图与子视图背景颜色不一致问题求助

在SwiftUI弹出Sheet时，Picker（分段选择器）和包含Form的子视图之间存在背景颜色差异，附上相关代码和截图，寻求解决方案：

主视图代码 #

var body: some View {
    
    VStack {
        Picker("", selection: $selection) {
            Text("Main Info").tag(Selection.main)
            Text("Contacts").tag(Selection.contacts)
            Text("Task").tag(Selection.tasks)
        }
        .pickerStyle(.segmented)
        .padding()
        switch selection {
        case .main:
            ModifyMainInformation(mainInformation: $account.mainInformation)
        case .contacts:
            ContactListView(contacts: $account.contacts)
        case .tasks:
            Text("Tasks Editor")
        }
        Spacer()
    }
    .navigationTitle("Add Account")
}

enum Selection {
    case main
    case contacts
    case tasks
}

子视图代码 #

var body: some View {
    
    Form{
        TextField("Account Name", text: $mainInformation.name)
        TextField("Address", text: $mainInformation.address)
        TextField("City", text: $mainInformation.city)
        }
}

解决方案建议 #

• 统一背景色匹配Form风格：给主视图的VStack设置Form默认的背景色，让Picker区域和Form背景一致：

  VStack {
      // ... 原有内容
  }
  .background(Color(UIColor.systemGroupedBackground))
  

• 修改Form背景匹配Picker区域：如果希望Form使用和Picker区域相同的默认背景，可隐藏Form的滚动背景并设置统一背景：

  Form {
      // ... 原有内容
  }
  .scrollContentBackground(.hidden)
  .background(Color(UIColor.systemBackground))
  

• 使用NavigationStack统一风格（iOS 16+）：将Sheet内的内容嵌套在NavigationStack中，系统会自动处理背景统一，更符合SwiftUI设计规范：

  NavigationStack {
      VStack {
          // ... 原有内容
      }
      .navigationTitle("Add Account")
  }
  

内容的提问来源于stack exchange，提问作者srome11