如何使自定义DisclosureGroup (下拉)在SwiftUI中？
提问于 2022-08-15 01:18:30
我想要做一个自定义DisclosureGroup，它具有与默认DisclosureGroup相同的功能，但允许我更改颜色文本，甚至可以放置图像而不是字符串。
因为DisclosureGroup不允许我移除左边的蓝色箭头指示器，而且它有限制。
现在默认的DisclosureGroup是：
struct ContentView: View {
@State private var revealDetails = false
var body: some View {
DisclosureGroup("Show Terms", isExpanded: $revealDetails) {
Text("Long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here long terms and conditions here.")
}
}
}我想做这样的事：
struct ContentView: View {
@State private var isExpanded = false
var body: some View {
CustomDisclosureGroup(isExpanded: $isExpanded, actionOnClick: {
isExpanded.toggle()
print("do something else")
}, prompt: {
HStack {
Text("this is a custom row")
.foregroundColor(Color.white)
Spacer()
Image("customArrow")
.resizable()
.frame(width: 12, height: 12)
}
.background(Color.blue)
}, expandedView: {
VStack {
Text("this is also a custom view")
Text("another one")
}
.background(Color.red)
})
}
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-08-15 03:07:02
经过一些搜索和编码之后，我创建了这个结构，它满足了我的需要，并与SwiftUI中的默认SwiftUI非常相似。
下面是它的用法：
struct ContentView: View {
@State private var isExpanded = false
@AppStorage("timesClicked") private var timesClicked = 0
var body: some View {
ScrollView {
CustomDisclosureGroup(animation: .easeInOut(duration: 0.2), isExpanded: $isExpanded) {
isExpanded.toggle()
timesClicked += 1
} prompt: {
HStack(spacing: 0) {
Text("How to open an account in your application?")
Spacer()
Text("?")
.fontWeight(.bold)
.rotationEffect(isExpanded ? Angle(degrees: 180) : .zero)
}
.padding(.horizontal, 20)
} expandedView: {
Text("you can open an account by choosing between gmail or ICloud when opening the application")
.font(.system(size: 16, weight: .semibold, design: .monospaced))
}
}
}
}只要在项目中实现此结构，就可以在任何时候使用它：
struct CustomDisclosureGroup<Prompt: View, ExpandedView: View>: View {
@Binding var isExpanded: Bool
var actionOnClick: () -> ()
var animation: Animation?
let prompt: Prompt
let expandedView: ExpandedView
init(animation: Animation?, isExpanded: Binding<Bool>, actionOnClick: @escaping () -> (), prompt: () -> Prompt, expandedView: () -> ExpandedView) {
self.actionOnClick = actionOnClick
self._isExpanded = isExpanded
self.animation = animation
self.prompt = prompt()
self.expandedView = expandedView()
}
var body: some View {
VStack(spacing: 0) {
prompt
if isExpanded{
expandedView
}
}
.clipped()
.contentShape(Rectangle())
.onTapGesture {
withAnimation(animation) {
actionOnClick()
}
}
}
}Stack Overflow用户
发布于 2022-08-15 19:00:56
虽然DisclosureGroup没有为您提供定制它的完全灵活性，但您仍然可以做一些事情：
- 如果您所需要的只是红色箭头而不是蓝色，您只需为其设置
.tint(.red)即可。 - 如果您需要标签中的文本以外的其他信息，您实际上可以使用：
- [`init(content: () -> Content, label: () -> Label)`](https://developer.apple.com/documentation/swiftui/disclosuregroup/init(content:label:%29)
- [`init(isExpanded: Binding<Bool>, content: () -> Content, label: () -> Label)`](https://developer.apple.com/documentation/swiftui/disclosuregroup/init(isexpanded:content:label:%29)对于更复杂的自定义，如果您正在iOS 16或更高版本上运行，请考虑采用DisclosureGroupStyle。
- 示例: struct CustomDisclosureGroupStyle：DisclosureGroupStyle { let按钮: Label (配置:配置) -> ->{ HStack { configuration.label Spacer()按钮->？90 :0)}.contentShape(矩形()) .onTapGesture { withAnimation {configuration.isExpanded.toggle() }如果configuration.isExpanded { configuration.content .padding(.leading，( 30) .disclosureGroupStyle(self) }} ContentView：.disclosureGroupStyle{ var body: some { DisclosureGroup {//…}ContentView文本(“ok”)}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73358999
复制相关文章
腾讯云开发者
