如何移除SwiftUI分段样式Picker的默认背景模糊效果

在SwiftUI中，应用SegmentedPickerStyle()样式的Picker（分段选择器）默认会在每个选项的背景添加模糊效果，未选中状态下的选项后方会存在灰色模糊层，无法与后方视图自然融合。直接添加.background(Color.clear)设置透明背景时，该背景设置会覆盖在灰色模糊层之上，无法实现透明融合的预期效果。

• 全局移除默认模糊层（适配全系统版本）
  SwiftUI的SegmentedPickerStyle底层基于UIKit的UISegmentedControl实现，默认的灰色模糊层是UIKit控件的原生背景，直接在SwiftUI层设置背景无法穿透到UIKit层修改。可以在App初始化时通过UIAppearance接口清空默认背景：

  @main
  struct YourAppName: App {
      init() {
          // 清空分段控件默认背景图，移除毛玻璃效果
          UISegmentedControl.appearance().backgroundImage = UIImage()
          // 清空分段之间的默认分割线
          UISegmentedControl.appearance().setDividerImage(
              UIImage(),
              forLeftSegmentState: .normal,
              rightSegmentState: .normal,
              barMetrics: .default
          )
          // 如需自定义选中态颜色，可直接设置selectedSegmentTintColor
          // UISegmentedControl.appearance().selectedSegmentTintColor = .white.opacity(0.2)
      }
      var body: some Scene {
          WindowGroup {
              ContentView()
          }
      }
  }
  

  该方法会全局生效，App内所有使用SegmentedPickerStyle的选择器都会移除默认灰色模糊层，后续自定义选择器的文字颜色、选中效果都不会被原生层遮挡。

• 单控件局部修改（不影响全局样式）
  如果只需要修改某一个分段选择器的背景，不需要全局改动，可以在对应视图加载时，针对当前视图容器内的分段控件单独设置Appearance属性：

  struct ContentView: View {
      @State private var selectedOption = 0
      var body: some View {
          Picker("选项", selection: $selectedOption) {
              Text("Option1").tag(0)
              Text("Option2").tag(1)
          }
          .pickerStyle(.segmented)
          .onAppear {
              DispatchQueue.main.async {
                  let appearance = UISegmentedControl.appearance(
                      whenContainedInInstancesOf: [UIHostingController<ContentView>.self]
                  )
                  appearance.backgroundImage = UIImage()
                  appearance.setDividerImage(UIImage(), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
              }
          }
      }
  }
  

  注意：属性修改需要放在主线程异步执行，确保在系统渲染默认控件样式之后覆盖配置，避免设置不生效。

• iOS 16及以上版本原生方案
  iOS 16开始系统对SegmentedPickerStyle的层级做了调整，不需要再调用UIKit接口，直接设置透明背景即可移除模糊层：

  Picker("选项", selection: $selectedOption) {
      Text("Option1").tag(0)
      Text("Option2").tag(1)
  }
  .pickerStyle(.segmented)
  .background(.clear)
  // 可通过.tint自定义选中块的颜色，适配后方视图色调
  .tint(.white.opacity(0.2))
  

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