如何修复 DisclosureGroup V 形箭头不透明度？

Question

我目前正在 SwiftUI 中创建手风琴视图，但遇到了一个问题：伴随

DisclosureGroup

的默认 V 形看起来是半透明的。我尝试将其集成到

List

中，但这种方法破坏了我的设计。此外，我尝试将重音设置为清晰并添加自定义图像，但这导致 V 形位置未对齐 - 它向左移动而不是保持在右侧。有其他人遇到过这个问题并找到解决方案或解决方法吗？ 另外，我应该提到我的最低部署目标是 iOS 15。

import SwiftUI

struct ContentView: View {
    @State private var isExpanded1 = false
    @State private var isExpanded2 = false
    @State private var isExpanded3 = false
    @State private var isExpanded4 = false

    var body: some View {
        VStack(alignment: .trailing, spacing: 0) {
            // Accordion Section 1
            DisclosureGroup(
                isExpanded: $isExpanded1,
                content: {
                    Text("Details for Services") // Test content for section 1
                },
                label: {
                    accordionLabel(number: "1", title: "Services", isExpanded: isExpanded1)
                }
            )
            
            .padding(16)
            .frame(width: 360, alignment: .top)
            .background(Color.white)

            // Accordion Section 2
            DisclosureGroup(
                isExpanded: $isExpanded2,
                content: {
                    Text("Information on Terms") // Test content for section 2
                },
                label: {
                    accordionLabel(number: "2", title: "Terms", isExpanded: isExpanded2)
                }
            )
            .padding(16)
            .frame(width: 360, alignment: .top)
            .background(Color.white)

            // Accordion Section 3
            DisclosureGroup(
                isExpanded: $isExpanded3,
                content: {
                    Text("Payment Options and Details") // Test content for section 3
                },
                label: {
                    accordionLabel(number: "3", title: "Payment", isExpanded: isExpanded3)
                }
            )
            .padding(16)
            .frame(width: 360, alignment: .top)
            .background(Color.white)

            // Accordion Section 4
            DisclosureGroup(
                isExpanded: $isExpanded4,
                content: {
                    Text("Signature Procedures and Guidelines") // Test content for section 4
                },
                label: {
                    accordionLabel(number: "4", title: "Signatures", isExpanded: isExpanded4)
                }
            )
            .padding(16)
            .frame(width: 360, alignment: .top)
            .background(Color.white)
        }
    }

    @ViewBuilder
    private func accordionLabel(number: String, title: String, isExpanded: Bool) -> some View {
        HStack {
            HStack(spacing: 8) {
                VStack {
                    Text(number)
                        .font(Font.custom("Inter", size: 16).weight(.bold))
                        .multilineTextAlignment(.center)
                        .foregroundColor(Color.gray)
                }
                .frame(width: 24, height: 24, alignment: .center)
                .cornerRadius(40)
                .overlay(
                    RoundedRectangle(cornerRadius: 40)
                        .inset(by: 0.5)
                        .stroke(Color.gray, lineWidth: 1)
                )

                Text(title)
                    .font(Font.custom("Inter", size: 16).weight(.bold))
                    .foregroundColor(Color.black)
            }
            Spacer()
//            Image(systemName: "chevron.down")
//                .rotationEffect(.degrees(isExpanded ? 180 : 0))
//                .foregroundColor(.primary)
//                .frame(width: 24, height: 24, alignment: .center)
        }
    }
}

Answer 1

V 形图标与大多数系统控件一样，将采用

tint

颜色。您无法更改不透明度，但您可以通过更改色调颜色使其变暗。

要强制它变黑，你可以这样做：

  DisclosureGroup(...)
         .tint(.black)

您还可以将其应用于整个视图层次结构，以便一次为所有项目设置它。

如果这还不够，您需要通过使用自定义

DisclosureGroup

并将其应用到视图层次结构来创建您自己的自定义版本

DisclosuregroupStyle

。使用 SF Symbols 作为 V 形将允许您对其演示进行完全的字体控制，因此您可以根据设计需要将其设置为大、粗体或不透明。这也将允许您将所有修改器压缩到一个地方。

struct AccordionDisclosureStyle: DisclosureGroupStyle {
   func makeBody(configuration: Configuration) -> some View {
      VStack(alignment: .leading) {
         Button {
            configuration.isExpanded.toggle()
         } label: {
            HStack(alignment: .firstTextBaseline) {
               configuration.label
               Image(systemName: configuration.isExpanded ? "chevron.down" : "chevron.right")
                  .foregroundColor(.black)
                  .font(.body)
                  .frame(maxWidth: .infinity, alignment: .trailing)
                  .animation(nil, value: configuration.isExpanded)
            }
            .contentShape(Rectangle())
         }
         if configuration.isExpanded {
            configuration.content
               .padding(.leading, 40)
         }
      }
      .padding(16)
      .background(Color.white)

   }
}

您可能想播放动画以获得您想要的效果。

然后，您可以应用到整个视图层次结构，它将配置所有公开组。

struct ContentView: View {
   @State private var isExpanded1 = false
   @State private var isExpanded2 = false
   @State private var isExpanded3 = false
   @State private var isExpanded4 = false
   
   var body: some View {
      List {
            // Accordion Section 1
         DisclosureGroup(...)
            // Accordion Section 2
         DisclosureGroup(...)
            // Accordion Section 3
         DisclosureGroup(...)
         
            // Accordion Section 4
         DisclosureGroup(...)
      }
      .disclosureGroupStyle(AccordionDisclosureStyle())
   }   

在示例中请注意，

VStack

已替换为

List

，因为这在展开组时提供了更好的动画（这也需要删除帧修改器）。

[顺便说一句，创建一个包含每个组内容的数组并迭代它，而不是完整地写出每个条目]