SwiftUI DisclosureGroup Chevron非预期半透明：是Bug还是特性？

问题现象 #

使用DisclosureGroup时，右侧的展开/收起箭头（Chevron）会呈现半透明效果，无论设置tint(_:)、已弃用的accentColor(_:)还是使用默认颜色，该现象都存在：

自定义红色tint的效果 #

对应代码：

DisclosureGroup {
  Text("Content")
} label: {
  Text("Label")
    .foregroundStyle(Color.red)
}
  .tint(.red)
  .padding()

默认样式的效果 #

对应代码：

DisclosureGroup {
  Text("Content")
} label: {
  Text("Label")
}
  .padding()

结论与解决方案 #

这是SwiftUI的默认设计特性——系统为贴合iOS视觉风格，默认给Chevron添加了透明度。要消除半透明效果，可根据iOS版本选择以下方案：

方案1：自定义Label完全控制箭头（全iOS版本通用） #

通过绑定DisclosureGroup的展开状态，手动添加不透明的箭头图标，完全替换系统默认Chevron：

@State private var isExpanded = false

var body: some View {
  DisclosureGroup(isExpanded: $isExpanded) {
    Text("Content")
  } label: {
    HStack {
      Text("Label")
        .foregroundStyle(Color.red)
      Spacer()
      Image(systemName: isExpanded ? "chevron.down" : "chevron.right")
        .foregroundStyle(Color.red)
        // 强制设置不透明，也可省略该属性，默认就是完全不透明
        .opacity(1)
    }
  }
  .padding()
}

方案2：通过UIViewRepresentable修改系统控件（iOS 16+） #

如果不想自定义Label，可以通过底层UIKit控件修改Chevron的透明度：

struct OpaqueDisclosureGroupHelper: UIViewRepresentable {
  func makeUIView(context: Context) -> UIView { UIView() }
  
  func updateUIView(_ uiView: UIView, context: Context) {
    DispatchQueue.main.async {
      // 递归查找系统Chevron的UIImageView
      func findChevron(in view: UIView) -> UIImageView? {
        for subview in view.subviews {
          if let imageView = subview as? UIImageView,
             ["chevron.right", "chevron.down"].contains(imageView.image?.systemName) {
            return imageView
          }
          if let found = findChevron(in: subview) {
            return found
          }
        }
        return nil
      }
      
      findChevron(in: uiView.superview!)?.alpha = 1.0
    }
  }
}

// 使用方式
var body: some View {
  DisclosureGroup {
    Text("Content")
  } label: {
    Text("Label")
      .foregroundStyle(Color.red)
  }
  .tint(.red)
  .padding()
  .background(OpaqueDisclosureGroupHelper())
}

方案3：环境变量调整（iOS 17+ 最简洁） #

iOS 17及以上版本可通过符号渲染模式环境变量，让图标以纯色渲染，直接消除半透明：

DisclosureGroup {
  Text("Content")
} label: {
  Text("Label")
    .foregroundStyle(Color.red)
}
.tint(.red)
.environment(\.symbolRenderingMode, .monochrome)
.padding()

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