持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
大家好，我是小黑，一个还没秃头的程序员~~~
迎着狂风、继续坚强人生
大家好，今天依然介绍SwiftUI的基础组件，OutlineGroup以及DisclosureGroup，以最少的代码行构建层次结构可扩展和可折叠的列表。
效果如图：
话不多说，正文开始：
（一）OutlineGroup
OutlineGroup是一种结构，根据需要从树形结构的已标识数据的基础集合计算视图和公开组。
构造函数：
init<DataElement>(_ root: DataElement,
children: KeyPath<DataElement, Data?>,
content: @escaping (DataElement) -> Leaf) where ID == DataElement.ID, DataElement : Identifiable, DataElement == Data.Element
init<DataElement>(_ root: DataElement, id: KeyPath<DataElement, ID>,
children: KeyPath<DataElement, Data?>,
content: @escaping (DataElement) -> Leaf) where DataElement == Data.Element
| 参数 | 说明 |
|---|---|
| root | 树形结构的标识数据集合的根 |
| children | 指向属性的键路径,该属性的非空值提供了data的子属性 |
| content | 基于数据中的元素生成内容视图的视图构建器 |
| id | 到数据元素标识符的键路径 |
当需要通过公开视图表示数据层次结构的视图时，请使用大纲组。这允许用户通过使用公开视图来展开和折叠分支来导航树结构。 在下面的示例中，FileItem数据的树结构提供了文件系统的简化视图。传递此树的根及其子节点的关键路径允许您快速创建文件系统的可视化表示。
struct FileItem: Hashable, Identifiable, CustomStringConvertible {
var id: Self { self }
var name: String
var children: [FileItem]? = nil
var description: String {
switch children {
case nil:
return "📄 \(name)"
case .some(let children):
return children.isEmpty ? "📂 \(name)" : "📁 \(name)"
}
}
}
let data =
FileItem(name: "users", children:
[FileItem(name: "user1234", children:
[FileItem(name: "Photos", children:
[FileItem(name: "photo001.jpg"),
FileItem(name: "photo002.jpg")]),
FileItem(name: "Movies", children:
[FileItem(name: "movie001.mp4")]),
FileItem(name: "Documents", children: [])
]),
FileItem(name: "newuser", children:
[FileItem(name: "Documents", children: [])
])
])
OutlineGroup(data, children: \.children) { item in
Text("\(item.description)")
}
（二）DisclosureGroup
DisclosureGroup是一种基于公开控件的状态显示或隐藏另一个内容视图的视图。 构造函数
init<S>(_ label: S, isExpanded: Binding<Bool>, content: @escaping () -> Content) where S : StringProtocol
| 参数 | 说明 |
|---|---|
| label | 内容的描述 |
| isExpanded | 绑定到一个布尔值，该值确定组的展开状态(展开或折叠) |
| content | 组扩大时显示的内容 |
公开组视图由一个标识内容的标签和一个显示和隐藏内容的控件组成。显示内容使披露组处于“展开”状态，隐藏内容使披露组处于“折叠”状态。 在下面的示例中，公开组包含两个开关和一个嵌入的公开组。顶级公开组使用绑定属性topLevelExpanded公开其展开状态。通过扩展公开组，用户可以使用切换来更新toggleStates结构的状态。
struct ToggleStates {
var oneIsOn: Bool = false
var twoIsOn: Bool = true
}
@State private var toggleStates = ToggleStates()
@State private var topExpanded: Bool = true
var body: some View {
DisclosureGroup("Items", isExpanded: $topExpanded) {
Toggle("Toggle 1", isOn: $toggleStates.oneIsOn)
Toggle("Toggle 2", isOn: $toggleStates.twoIsOn)
DisclosureGroup("Sub-items") {
Text("Sub-item 1")
}
}
}
效果图中的完整代码
@State private var isOpenToggle:Bool=false
let menus = MenuItem(
name: "点击展开",menus: [
MenuItem(name: "menu1",menus: [
MenuItem(name: "menu1-1"),
MenuItem(name: "menu1-2")
]
),
MenuItem(name: "menu2")
]
)
//以下两种大纲型菜单中，后者需要自己定义数据
DisclosureGroup("点击展开"){
Text("子菜单")
Toggle("toggle", isOn: $isOpenToggle)
DisclosureGroup("第二级：点击展开"){
Text("子菜单")
Text("子菜单")
Text("子菜单")
}
}
OutlineGroup(menus, children: \.menus) { menu in
Text(menu.name)
}
以上便是swift中关于折叠组件的使用，今天的swiftUI学习分享就到这里，后面我会持续输出iOS开发笔记，感谢大家的阅读！共同努力！大家晚安！
