SwiftUI 2.0 List with children - 如何使显示按钮的可点击区域覆盖整个列表项 [英] SwiftUI 2.0 List with children - how to make the tappable area of the disclosure button cover the whole list item
问题描述
我正在为 iOS 14 制作一个 SwiftUI 应用程序,我有一个侧边栏列表,它使用列表的新 children:
属性使列表可扩展:
但是,目前我只能在我精确单击披露箭头时展开此列表.例如,当我单击我的酷项目"文本时,我也希望能够展开此列表.
这在文件"应用中是可能的 - 当我单击位置"文本时,我可以看到位置"项的所有子项,但我不知道如何在我的应用中执行此操作.>
澄清一下,每个项目的List
项是一个Text
视图,子列表项是NavigationLink
这种行为是否可以在 SwiftUI 中实现,甚至可以通过 onTapGesture 编程或使用除 List
以外的其他东西?提前感谢您的任何帮助/建议!
这里是方法的演示(当然,在您的项目中,您会将展开/折叠状态移动到视图模型中)
struct DemoDisclosureGroups:查看{让项目:[书签] = [.example1, .example2, .example3]@State 私有变量标志:[Bool] = [false, false, false]var主体:一些视图{列表 {ForEach(Array(items.enumerated()), id: .1.id) { i, group in披露组(isExpanded:$flags[i]){ForEach(group.items ?? []) { item in标签(item.name, systemImage: item.icon)}} 标签: {标签(group.name, systemImage: group.icon).contentShape(矩形()).onTapGesture {带动画{self.flags[i].toggle()}}}}}}}结构书签:可识别{让 id = UUID()让名称:字符串让图标:字符串var 项目:[书签]?//一些示例网站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")//一些示例组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])}
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.
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.
To clarify, List
item for each project is a Text
view and the child list items are NavigationLink
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 List with children - 如何使显示按钮的可点击区域覆盖整个列表项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!