带子项的SwiftUI 2.0列表-如何使显示按钮的可点击区域覆盖整个列表项 [英] SwiftUI 2.0 List with children - how to make the tappable area of the disclosure button cover the whole list item

问题描述

我正在为iOS 14开发一个SwiftUI应用程序，并且我有一个侧边栏列表，该边栏列表使用list的新children:属性使列表可扩展:

I am making a SwiftUI app for iOS 14, and I have a sidebar list that uses the new children: attribute of list to make the list expandable:

但是，目前，仅当我精确单击披露箭头时，我才能够扩展此列表.例如，当我也单击我的酷项目"文本时，我希望能够扩展此列表.

However, at the moment I am only able to expand this list when I click precisely on the disclosure arrow. I would like to be able to expand this list when I click on the 'My Cool Project' text as well, for instance.

这在Files应用程序中是可能的-单击"Locations"的文本时，我可以看到Locations项目的所有子项，但是我不知道如何在我的应用程序中执行此操作.

This is possible in the Files app - I can see all of the children of the Locations item when I click on the text saying 'Locations', but I can't figure out how to do this in my app.

为澄清起见，每个项目的List项目是Text视图，子列表项是NavigationLink

To clarify, List item for each project is a Text view and the child list items are NavigationLink

在SwiftUI中，甚至可以通过onTapGesture或List以外的其他方式，也可以实现这种行为吗?预先感谢您的任何帮助/建议！

Would this behaviour be possible in SwiftUI, even programatically through onTapGesture or with something other than a List? Thanks in advance for any help/advice!

推荐答案

这是方法的演示(当然，在您的项目中，您需要将展开/折叠状态移动到视图模型中)

Here is a demo of approach (of course in your project you'd move expand/collapse state into view model)

struct DemoDisclosureGroups: View {
    let items: [Bookmark] = [.example1, .example2, .example3]
    @State private var flags: [Bool] = [false, false, false]

    var body: some View {
        List {
            ForEach(Array(items.enumerated()), id: \.1.id) { i, group in
                DisclosureGroup(isExpanded: $flags[i]) {
                    ForEach(group.items ?? []) { item in
                        Label(item.name, systemImage: item.icon)
                    }
                } label: {
                    Label(group.name, systemImage: group.icon)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            withAnimation {
                                self.flags[i].toggle()
                            }
                        }
                }
            }
        }
    }
}

struct Bookmark: Identifiable {
    let id = UUID()
    let name: String
    let icon: String
    var items: [Bookmark]?

    // some example websites
    static let apple = Bookmark(name: "Apple", icon: "1.circle")
    static let bbc = Bookmark(name: "BBC", icon: "square.and.pencil")
    static let swift = Bookmark(name: "Swift", icon: "bolt.fill")
    static let twitter = Bookmark(name: "Twitter", icon: "mic")

    // some example groups
    static let example1 = Bookmark(name: "Favorites", icon: "star", items: [Bookmark.apple, Bookmark.bbc, Bookmark.swift, Bookmark.twitter])
    static let example2 = Bookmark(name: "Recent", icon: "timer", items: [Bookmark.apple, Bookmark.bbc, Bookmark.swift, Bookmark.twitter])
    static let example3 = Bookmark(name: "Recommended", icon: "hand.thumbsup", items: [Bookmark.apple, Bookmark.bbc, Bookmark.swift, Bookmark.twitter])
}

这篇关于带子项的SwiftUI 2.0列表-如何使显示按钮的可点击区域覆盖整个列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！