隐藏 SwiftUI DisclosureGroup 箭头并删除默认填充

Question

我正在尝试制作一个完全自定义的可扩展部分列表，其中包含 SwiftUI 中的项目。这就是我希望它最终的样子：

我认为我已经正确设置了 SwiftUI 代码，但我无法找到视图修饰符来完成我想要的任务。

这是我的代码，为简洁起见，删除了大多数样式修饰符：

List {
  ForEach(sections, id: \.self) { section in
  
    DisclosureGroup(isExpanded: $expand) {
      ForEach(section.projectArray, id: \.self) { project in
        //--- Projects ---
        HStack{
          Image("project")
          Text(project.wrappedName)
          Spacer()
        }
        .padding(EdgeInsets(top: 0, leading: 0, bottom:0, trailing: 0))
      } 
    } label: {
      //--- Sections ---
      HStack{
        Text(section.wrappedName)
        Spacer()
        //Custom Toggle Arrow
        Button(action: {
          //Toggle logic
        }){
          if expand{
            Image("section-open")
          }else{
            Image("section-closed")
          }
        }
      }
      .padding(0)
    }
  } 
}.listStyle(PlainListStyle())

我找不到任何可以更改的内容DisclosureGroup来添加一些我不想要的默认样式：

A- 默认展开/折叠箭头

B- 展开时， 的DisclosureGroup会label水平增长

C- 子元素的默认填充

我检查了文档，没有找到删除这些默认样式的方法。我有什么想法可以完成这个设计吗？

Answer 1

尝试为您的内容设置listRowInsets前导负8DisclosureGroup

List {
    ForEach(sections) { section in
        DisclosureGroup {
            ForEach(section.items) {

            }.listRowInsets(.init(top: 0, leading: -8, bottom: 0, trailing: 0))
        } label: { 

        }
    }
}

Answer 2

这是一种 hacky 方法，在内部不起作用，但在内部和其他堆栈中List可以工作。LazyVStack

import SwiftUI

struct ContentView: View {
    @State var isExpanded: Bool = false
    var body: some View {
        ScrollView {
            LazyVStack {
                DisclosureGroup("Disclosure", isExpanded: $isExpanded) {
                    Text("Hello, world!")
                        .padding()
                }
                .buttonStyle(DisclosureStyle(isExpanded: $isExpanded))

            }
            .padding(.horizontal)
        }
    }
}

struct DisclosureStyle: ButtonStyle {
    @Binding var isExpanded: Bool
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Image(systemName: isExpanded ? "chevron.down.circle" : "chevron.right.circle")
                .if(configuration.isPressed) { image in
                    image.symbolVariant(.fill)
                }
                .foregroundStyle(isExpanded ? .green : .accentColor)
            Spacer()
            let font = isExpanded ? Font.headline.monospaced() : .headline
            configuration.label
                .font(font).id(font)
                .overlay(alignment: .topTrailing) {
                    Rectangle().fill(.bar).frame(maxWidth: 30)
            }
            .foregroundStyle(isExpanded ? .green : .accentColor)
        }
        .background(.bar)
    }
}

extension View {
    @ViewBuilder func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
        if condition {
            transform(self)
        } else {
            self
        }
    }
}

结果如下：