OutlineGroup

Overview 概要

Use an outline group when you need a view that can represent a hierarchy of data by using disclosure views. This allows the user to navigate the tree structure by using the disclosure views to expand and collapse branches.

In the following example, a tree structure of FileItem data offers a simplified view of a file system. Passing the root of this tree and the key path of its children allows you to quickly create a visual representation of the file system.

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

Type Parameters

Five generic type constraints define a specific OutlineGroup instance:

• Data: The type of a collection containing the children of an element in the tree-shaped data.

• ID: The type of the identifier for an element.

• Parent: The type of the visual representation of an element whose children property is non-nil

• Leaf: The type of the visual representation of an element whose children property is nil.

• Subgroup: A type of a view that groups a parent view and a view representing its children, typically with some mechanism for showing and hiding the children