DisclosureGroup in SwiftUI

by

DisclosureGroup is a view that reveals or hides content when tapped, providing a collapsible section that’s especially useful for organizing hierarchical or expandable information. It displays a title or label that users can tap to expand and show additional content.

Basic Structure

The basic structure of a DisclosureGroup consists of a label (usually Text or another view) and a block of content that appears when the group is expanded.

DisclosureGroup("Title") {
    // Collapsible content goes here
}

Simple Example

Here’s a basic example of a DisclosureGroup that reveals more information when tapped.

import SwiftUI

struct ContentView: View {
    var body: some View {
        DisclosureGroup("More Details") {
            Text("Here are additional details that are hidden by default.")
        }
        .padding()
    }
}

In this example:

  • The DisclosureGroup initially shows only the title, “More Details”.
  • When tapped, it reveals the Text view with extra details.

Using a State Variable to Control Expanded State

You can control the expanded or collapsed state of the DisclosureGroup using a state variable.

import SwiftUI

struct ContentView: View {
    @State private var isExpanded = false

    var body: some View {
        DisclosureGroup("More Details", isExpanded: $isExpanded) {
            Text("Here are additional details that are hidden by default.")
        }
        .padding()
    }
}

In this example:

  • The DisclosureGroup uses isExpanded to keep track of its state.
  • By binding isExpanded to the DisclosureGroup, you can programmatically expand or collapse it by updating the variable.

DisclosureGroup with Custom Label

The label of a DisclosureGroup can be customized with any view, allowing you to use images, icons, or more complex layouts.

import SwiftUI

struct ContentView: View {
    var body: some View {
        DisclosureGroup {
            Text("This is some extra information displayed when expanded.")
        } label: {
            HStack {
                Image(systemName: "info.circle")
                Text("Additional Info")
                    .font(.headline)
            }
        }
        .padding()
    }
}

Here, the label is a HStack containing an icon and a text label, giving it a custom look.

Nested DisclosureGroups

You can nest DisclosureGroup instances to create a multi-level collapsible structure.

import SwiftUI

struct ContentView: View {
    var body: some View {
        DisclosureGroup("Options") {
            DisclosureGroup("Settings") {
                Text("Option 1")
                Text("Option 2")
            }
            DisclosureGroup("Preferences") {
                Text("Preference A")
                Text("Preference B")
            }
        }
        .padding()
    }
}

This example has a parent DisclosureGroup titled “Options” with two nested DisclosureGroups for “Settings” and “Preferences”. Each nested group contains its own items.

Customizing DisclosureGroup Appearance

You can style DisclosureGroup using padding, background colors, borders, and other SwiftUI modifiers.

import SwiftUI

struct ContentView: View {
    var body: some View {
        DisclosureGroup("Settings") {
            Text("Option 1")
            Text("Option 2")
        }
        .padding()
        .background(Color(.secondarySystemBackground))
        .cornerRadius(10)
        .shadow(radius: 5)
    }
}

In this example:

  • The DisclosureGroup has padding, a background color, rounded corners, and a shadow effect.

Controlling Animation for Smooth Expansion

SwiftUI’s default animations make DisclosureGroup transitions smooth, but you can add custom animations if needed.

import SwiftUI

struct ContentView: View {
    @State private var isExpanded = false

    var body: some View {
        DisclosureGroup("Settings", isExpanded: $isExpanded) {
            Text("Option 1")
            Text("Option 2")
        }
        .padding()
        .animation(.easeInOut(duration: 0.3), value: isExpanded)
    }
}

By applying .animation, the DisclosureGroup will have a smooth transition when expanding or collapsing.

Example in List or Form

DisclosureGroup works well in lists or forms, often to group settings or options that can be revealed as needed.

import SwiftUI

struct ContentView: View {
    @State private var isOptionExpanded = false

    var body: some View {
        Form {
            Section(header: Text("Preferences")) {
                DisclosureGroup("Notifications", isExpanded: $isOptionExpanded) {
                    Toggle("Email Notifications", isOn: .constant(true))
                    Toggle("Push Notifications", isOn: .constant(false))
                }
            }
        }
    }
}

In this example:

  • A DisclosureGroup is used inside a Form, making it an ideal choice for organizing settings.
  • The DisclosureGroup includes toggles for different notification settings, hidden until expanded.

DisclosureGroup is a versatile and user-friendly way to manage collapsible content in SwiftUI, especially for hierarchies or content that benefits from being hidden until the user needs it.

  • Expandable structure: Displays only the label until tapped.
  • Customizable: Works with custom labels, nested groups, and multiple types of content.
  • Common uses: Great for settings, hierarchical menus, and organizing information in forms or lists.

Leave a Reply