iPhone SwiftUI layouts

Explore SwiftUI APIs, components, and modifiers with interactive iPhone previews, Swift code, and Apple documentation. Compare every available orientation, appearance, and design.

List

Outline Group

A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data.

Explore Outline Group on iPhone in portrait, with SwiftUI code and Apple API documentation.

SwiftUI code

Full details Docs 
struct TreeItem: Identifiable {
  let id = UUID()
  let name: String
  let children: [TreeItem]?

  init(_ name: String, children: [TreeItem]? = nil) {
    self.name = name
    self.children = children
  }
}

let data = [
TreeItem("Header", children: [
TreeItem("Foo", children: [
TreeItem("Foo 1"),
TreeItem("Foo 2")
]),
TreeItem("Bar", children: [
TreeItem("Bar 1"),
TreeItem("Bar 2")
])
])
]

var body: some View {
  List {
    OutlineGroup(data, children: \.children) { item in
    Text(item.name)
  }
}
}

Compatibility

iOS 14.0+ iPadOS 14.0+ macOS 11.0+ visionOS 1.0+

Tags

Found an issue or have a suggestion?

All variants

Every available iPhone screenshot for Outline Group.

1 views