Discover published sets by community

LazyVGrid arranges children in a grid that lazy-loads vertically. Syntax: LazyVGrid(columns: gridItems) { /* views */ }. Use for memory-efficient grids with many items.

An HStack arranges views horizontally. Syntax: HStack { /* views */ }. Used for creating horizontal layouts.

A @Binding property wrapper denotes a two-way connection to a state that is owned by another view. Syntax: @Binding var name: Type. Allows a parent to share state with a child view.

A TextField allows for user text input. Syntax: TextField("Placeholder", text: $variable). Binding enables dynamic text updates.$

Animation adds animated transitions to view changes. Syntax: .animation(Animation.linear(duration: TimeInterval)). Used to make the UI more engaging.

Environment allows access to system-wide information within a view. Syntax: @Environment(\.presentationMode) var presentationMode. Use cautiously, as it couples view with environment data.

An @EnvironmentObject is a property wrapper for accessing an observable object shared across a view hierarchy. Syntax: @EnvironmentObject var object: ObservableObjectType. Useful for injecting instances down the view hierarchy.

Button triggers an action when pressed. Syntax: Button(action: { /* perform action */ }) { /* label view */ }. Can be used for user interactions.

ScrollView provides a scrollable view. Syntax: ScrollView { /* content */ }. Enables browsing content that exceeds the screen limits.

Form groups user-input controls for data collection. Syntax: Form { /* form fields */ }. Generally used as a container for settings.

ViewModifier protocol customizes the rendering and behavior of a view. Syntax: struct MyModifier: ViewModifier {}. Use to create reusable modifier effects.

Safe Area ensures content is within the visible area. Syntax: .edgesIgnoringSafeArea(.all). Use this to extend the view behind notches, status bars, or tab bars.

Image displays images in the UI. Syntax: Image("imageName"). It's utilized for static and dynamic images.

Sheet presents a modal view. Syntax: .sheet(isPresented: $variable) { /* modal content */ }. Used for transient tasks or gathering input from the user.$

ProgressView displays the progress of a task. Syntax: ProgressView(value: progress, total: totalValue). Can be styled as a bar or a spinner.

PreferenceKey protocol defines how to store and retrieve view preferences. Syntax: struct MyPreferenceKey: PreferenceKey {}. Modifies the view's rendering pass for sharing data.

Canvas provides a space for immediate-mode drawing using a GraphicsContext. Syntax: Canvas { context, size in /* drawing code */ }. Good for complex and custom graphics.

A VStack arranges views vertically. Syntax: VStack { /* views */ }. Used for creating vertical layouts.

Picker allows users to select from a set of options. Syntax: Picker("Label", selection: $variable) { /* options */ }. Supports customizable presentation styles.$

DatePicker allows users to pick a date and time. Syntax: DatePicker("Label", selection: $date). Can restrict dates and integrate with different calendars.$

ForEach is used to create views dynamically from a collection. Syntax: ForEach(collection) { item in /* view using item */ }. It can iterate over a constant range or dynamic data.

LazyHStack creates a horizontally stacked view that only renders visible children. Syntax: LazyHStack { /* views */ }. Optimizes performance for horizontal lists with many items.

Padding adds space around the view content. Syntax: .padding(.all, 8). Applies space within the view boundary to avoid content clipping.

Toggle is a switch that toggles a Boolean state. Syntax: Toggle("Description", isOn: $variable). Often used in settings interfaces.$

Section groups views within containers like Lists and Forms. Syntax: Section(header: Text("Title")) { /* content */ }. Use to semantically group items.

GeometryReader provides size and coordinate information. Syntax: GeometryReader { geometry in /* use geometry.size, geometry.frame(in:) */ }. Allows for creating size-dependent or responsive layouts.

Slider allows users to select a numeric value from a range. Syntax: Slider(value: $variable, in: range). Used often for settings or controls.$

An @ObservedObject is a property wrapper that subscribes to an observable object for changes. Syntax: @ObservedObject var object: ObservableObjectType. Ideal for complex, sharable state management.

A List displays a scrolling, single-column list of rows. Syntax: List(/* items */) { /* row content */ }. Used for creating table-like structures.

Transition defines how a view enters or exits the screen. Syntax: .transition(.opacity). Enhances the user experience during view changes.

Text displays read-only text. Syntax: Text("String"). It's used for static text in the UI.

Alert presents an alert dialog to the user. Syntax: .alert(isPresented: $variable) { Alert(title: Text("Title")) }. Utilized for communicating information or capturing decisions.$

ColorPicker lets users choose a color. Syntax: ColorPicker("Label", selection: $color). Often used in settings or drawing apps.$

LazyVStack creates a vertically stacked view that only renders visible children. Syntax: LazyVStack { /* views */ }. Improves performance when dealing with many child views.

Group groups multiple views without changing the UI layout. Syntax: Group { /* views */ }. Use to conditionally include views or to avoid view nesting limits.

A @State property wrapper is used to declare a source of truth for value types. Syntax: @State private var name: Type. Enables data-driven updates to the UI.

Alignment defines how views align within their parent. Syntax: VStack(alignment: .leading) {}. Commonly used within Stacks to align child views.

Shape protocol defines a path that can be drawn. Syntax: struct MyShape: Shape {}. Used to create and customize geometric shapes.

Aspect Ratio constrains a view's aspect ratio. Syntax: .aspectRatio(contentMode: .fit). Utilized to maintain the proportions of images or custom views.

TabView facilitates the creation of a tab-based interface. Syntax: TabView { /* tabs content */ }. Each tab can contain its own view hierarchy.

Spacer creates flexible spaces between views. Syntax: Spacer(). It's often used to push views apart.

A NavigationView creates a navigation interface. Syntax: NavigationView { /* content */ }. Typically used to manage hierarchical content navigation.

NavigationViewLink is used to create transitions between views in a NavigationView. Syntax: NavigationLink(destination: { /* Destination View */ }) { /* Label View */ }. Supports passing data to the destination view.

Divider draws a line to divide content visually. Syntax: Divider(). It is used to group or separate UI elements.

LazyHGrid arranges children in a grid that lazy-loads horizontally. Syntax: LazyHGrid(rows: gridItems) { /* views */ }. Suited for horizontal grids with many scrollable items.

GridItem describes the size and spacing for items in LazyVGrid and LazyHGrid. Syntax: GridItem(.flexible(minimum: size)). Specifies layout properties for grid-based layouts.

A ZStack overlays views on top of each other. Syntax: ZStack { /* views */ }. Used for creating overlapping content.