ios 为SwiftUI的Disclosure Group的V形填充,而不影响组的内容

nkcskrwz  于 12个月前  发布在  iOS
关注(0)|答案(2)|浏览(117)

有没有办法在DisclosureGroup标签的尾部添加一个inset,即在chevron侧?
当我将padding()添加到DisclosureGroup时,它的标签和内容都是缩进的:

DisclosureGroup {
  VStack {
    Text("Row 1")
    Divider()
    Text("Row 2")
    Divider()
  }
} label: {
  Text("Label")
}
  .padding()

字符串


的数据
我想避免这种情况,让组的内容从屏幕的一边传播到另一边,特别是Divider s。
当我将padding()添加到DisclosureGrouplabel时,V形没有缩进:

DisclosureGroup {
  VStack {
    Text("Row 1")
    Divider()
    Text("Row 2")
    Divider()
  }
} label: {
  Text("Label")
    .padding()
}



任何指导都值得赞赏。

carvr3hs

carvr3hs1#

DisclosureGroup s可以很容易地用你自己的DisclosureGroupStyle进行定制。你可以在DisclosureGroupStyle中做几乎任何你想做的事情。
例如,这里我制作了一个样式,其中Button作为打开和关闭状态之间的切换,Image的V形符号为padding()。我还尽最大努力使过渡看起来类似于默认的公开组样式。

struct PaddedDisclosureGroup: DisclosureGroupStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            Button {
                withAnimation {
                    configuration.isExpanded.toggle()
                }
            } label: {
                HStack {
                    configuration.label
                    Spacer()
                    Image(systemName: configuration.isExpanded ? "chevron.up" : "chevron.forward")
                        .contentTransition(.symbolEffect)
                        .padding()
                }
            }
            if configuration.isExpanded {
                configuration.content
                    .transition(.asymmetric(insertion: .push(from: .bottom), removal: .identity))
            }
        }
    }
}

字符串
使用方法:

DisclosureGroup {
    VStack {
        Text("Row 1")
        Divider()
        Text("Row 2")
        Divider()
    }
} label: {
    Text("Label")
}
.disclosureGroupStyle(PaddedDisclosureGroup())

i7uaboj4

i7uaboj42#

我相信Sweeper是正确的,它是不可能单独玩的chevron填充,我们能做的最好的是修改DisclosureGroups的UI。最简单的方法来实现这一点是DisclosureGroupStyle,如the accepted answer所述。
这个答案只是所提出的解决方案的扩展,该解决方案:
1.改进了公开内容的展开/折叠动画,以匹配原始UI组件的行为(受this answer启发)
1.改进了V形动画,使其像在原始UI组件中一样旋转
1.为DisclosureGroupStyle添加扩展,使样式的使用更加简洁
PaddedDisclosureGroup的更新实现:

struct PaddedDisclosureGroup: DisclosureGroupStyle {
  func makeBody(configuration: Configuration) -> some View {
    VStack(spacing: .zero) {
      Button {
        withAnimation { configuration.isExpanded.toggle() }
      } label: {
        HStack {
          configuration.label
          Spacer()
          Image(systemName: "chevron.forward")
            .rotationEffect(configuration.isExpanded ? .degrees(90.0) : .zero)
            .animation(.default, value: configuration.isExpanded)
        }
      }
        .padding(.horizontal)
      configuration
        .content
        .frame(height: configuration.isExpanded ? nil : .zero, alignment: .top)
        .clipped()
    }
  }
}

字符串
扩展名:

extension DisclosureGroupStyle where Self == PaddedDisclosureGroup {
  static var padded: PaddedDisclosureGroup { PaddedDisclosureGroup() }
}


使用方法:

DisclosureGroup {
  VStack {
    Text("Row 1")
    Divider()
    Text("Row 2")
    Divider()
  }
} label: {
  Text("Label")
}
  .disclosureGroupStyle(.padded)


结果(我添加了背景和更多的UI元素,使DisclosureGroup及其动画更加可见):
x1c 0d1x的数据

相关问题