问如何使自定义DisclosureGroup (下拉)在SwiftUI中？
EN

Stack Overflow用户

提问于 2022-08-15 01:18:30

回答 2查看 454关注 0票数 0

我想要做一个自定义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)
        })
    }
}

swift

user-interface

swiftui

customization

swiftui-button

回答 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()
            }
        }
    }
}

票数 0

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”)}}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73358999

复制

干货 | 石化产品机器学习价格模型开发和SEI石化产品价格分析体系构建

机器学习产品开发模型数据

我们的报告将分为六个部分，第一部分是研究背景与内容。受疫情影响以来，石化行业市场日趋饱和，竞争激烈，同时利润也受到压缩，大部分石化产业都需要转型开拓新市场，但同时又难以获取一些小品种化工品价格。所以我们希望通过机器学习方法实现敏锐捕捉市场化工品价格变化趋势，同时能够推算小品种化工品价格的目标。长此以往，我们希望能够建立属于我们自己的化工品价格体系，为石化行业提供新的机遇。

数据派THU

2023/08/08

3060