Provide views, controls, and layout structures for declaring your app's user interface using SwiftUI.

SwiftUI Documentation

Posts under SwiftUI subtopic

Post

Replies

Boosts

Views

Activity

Unexpected shape around a GlassProminentButtonStyle button with safeAreaBar in NavigationStack
I’m trying to use the new safeAreaBar() to place a button in the bottom safe area of the view for the main action. However, there’s a bug when the view is inside a NavigationStack: a white or translucent background appears around the button. When I move the view outside of the NavigationStack, the issue goes away. NavigationStack { List { Text("ok") } .safeAreaBar(edge: .bottom) { Button(action: {}, label: { Text("Continue").font(.headline) }) .buttonStyle(.glassProminent) } } Is it a known issue?
2
0
77
Aug ’25
Possible iOS 26 bug: tabViewBottomAccessory not affected by toolbarVisibility
I'm working with an app that has a structure of a main TabView, where each Tab has its own NavigationStack. A very simplified rendition of the app looks like this: struct ContentView: View { var body: some View { TabView { Tab("Tab 1", systemImage: "document") { NavigationStack { VStack { Text("Tab 1") NavigationLink("Load Detail") { VStack { Text("Detail View") }.toolbarVisibility(.hidden, for: .bottomBar, .tabBar) } } } } Tab("Tab 2", systemImage: "map") { NavigationStack { VStack { Text("Tab 2") } } } }.tabViewBottomAccessory { Button("Action") {} } } } With this structure, when I load the detail view in the NavigationLink, I see the tab bar hidden as I would expect. Unfortunately, the tabViewBottomAccessory button remains visible. I've taken some steps to try and fix this ( injecting state at different levels that observe the navigation path and try to change the visibility ) but none of those attempts work, and it seems to me that fundamentally, if the tab bar is desired to be hidden, then so also should the tab accessory be hidden. I didn't find anywhere online that seemed to indicate this was a known bug, so wanted to post this here first to see if this was the behavior that is expected, or worth filing a bug in iOS 26.
1
0
78
Aug ’25
Liquid Glass clear variant isn't clear
I've been experimenting with Liquid Glass quite a bit and watched all the WWDC videos. I'm trying to create a glassy segmented picker, like the one used in Camera: however, it seems that no matter what I do there's no way to recreate a truly clear (passthrough) bubble that just warps the light underneath around the edges. Both Glass.regular and Glass.clear seem to add a blur that can not be evaded, which is counter to what clear ought to mean. Here are my results: I've used SwiftUI for my experiment but I went through the UIKit APIs and there doesn't seem to be anything that suggests full transparency. Here is my test SwiftUI code: struct GlassPicker: View { @State private var selected: Int? var body: some View { ScrollView([.horizontal], showsIndicators: false) { HStack(spacing: 0) { ForEach(0..<20) { i in Text("Row \(i)") .id(i) .padding() } } .scrollTargetLayout() } .contentMargins(.horizontal, 161) .scrollTargetBehavior(.viewAligned) .scrollPosition(id: $selected, anchor: .center) .background(.foreground.opacity(0.2)) .clipShape(.capsule) .overlay { DefaultGlassEffectShape() .fill(.clear) // Removes a semi-transparent foreground fill .frame(width: 110, height: 50) .glassEffect(.clear) } } } Is there any way to achieve the above result or does Apple not trust us devs with more granular control over these liquid glass elements?
2
3
93
Aug ’25
iPadOS 26 Menu Bar - Hiding Unused Menu Items
How to Hide Unused Menu Items on iPadOS Menu Bar in SwiftUI? (Xcode 26 beta 4, iPadOS 26 beta 4) We’re working on adding menu bar support to our SwiftUI app on iPadOS, aiming to provide a more consistent and productive experience across platforms. We’d like to hide system-provided menu items that aren’t relevant to our app, such as: Open… Select All Customize Toolbar… New Window, Show All Windows, Open Windows, etc. Is there a way to control which default items appear in the menu bar? Feedback ID: FB18792279
0
0
87
Aug ’25
iPadOS 26 Menu Bar - Undo / Redo
How to Enable or Customize Undo/Redo Menu Items on iPadOS Menu Bar in SwiftUI? (Xcode 26 beta 4, iPadOS 26 beta 4) We’re working on adding menu bar support to our SwiftUI app on iPadOS, aiming to provide a more consistent and productive experience across platforms. Our app is a unified iPad/macOS app that uses UndoManager to support undo/redo operations. However, we’ve run into the following issues: On macOS, undo and redo work as expected via the menu bar. On iPadOS, the Undo and Redo menu items are always disabled, even though the functionality works within the app. We also explored the possibility of hiding the system-generated Undo/Redo menu items so we could provide custom implementations—but couldn’t find a way to remove or override them. Question: Is there a recommended approach to enable or customize the Undo/Redo menu bar items on iPadOS using SwiftUI? Any suggestions or insights would be greatly appreciated! Feedback ID: FB18792279
0
1
55
Aug ’25
iPadOS 26 Menu Bar - Copy / Paste
How to Support Menu Bar Copy/Paste/Cut/Delete Commands on iPadOS with SwiftUI? (Xcode 26 beta 4, iPadOS 26 beta 4) We’re working on adding menu bar support to our SwiftUI app on iPadOS, aiming to provide a more consistent and productive experience across platforms. However, we’ve encountered a challenge when trying to handle standard editing commands like Copy, Cut, Paste, and Delete from the menu bar: On iPadOS, SwiftUI modifiers such as onCopyCommand, onCutCommand, onPasteCommand, and onDeleteCommand appear to be unavailable. Additionally, since we can’t hide or override the default app menus, we’re unsure how to hook into or replace their behavior effectively. Question: What’s the recommended way to support standard editing actions like copy/paste via the menu bar in SwiftUI on iPadOS? Are there any workarounds or APIs we might have overlooked? Any guidance or best practices would be greatly appreciated! Feedback ID: FB18792279
1
0
66
Aug ’25
NavigationSplitView content column renders list in plain style – even on iPhone
Hi everyone, I’m building an iOS app that originally targeted iPhone using NavigationStack. Now I’m adapting it for iPad and switched to using NavigationSplitView to support a three-column layout. The structure looks like this: NavigationSplitView { A // Sidebar } content: { B // Middle column – this shows a list } detail: { C // Detail view } The issue is with the list shown in view B (the content column). It appears completely unstyled, as if it’s using .listStyle(.plain) — with no background material, and a very flat look. I can understand that this might be intentional on iPad to visually distinguish the three columns. However, the problem is that this same unstyled list also appears on iPhone, even though iPhone only shows a single column view at a time! I tried explicitly setting .listStyle(.insetGrouped) or .listStyle(.grouped) on the list in view B, but it makes no difference. When I go back to NavigationStack, the list in B is styled properly, just as expected — but then I lose the enhanced iPad layout. What I’m looking for: I’d like to keep using NavigationSplitView, but I want the list in the content column (view B) to use the default iOS list styling, at least on iPhone. Is there any way to achieve this? Thanks!
0
0
47
Aug ’25
NavigationSplitView content column renders list in plain style – even on iPhone
Hi everyone, I’m building an iOS app that originally targeted iPhone using NavigationStack. Now I’m adapting it for iPad and switched to using NavigationSplitView to support a three-column layout. The structure looks like this: NavigationSplitView { A // Sidebar } content: { B // Middle column – this shows a list } detail: { C // Detail view } The issue is with the list shown in view B (the content column). It appears completely unstyled, as if it’s using .listStyle(.plain) — with no background material, no grouped sections, and a very flat look. I can understand that this might be intentional on iPad to visually distinguish the three columns. However, the problem is that this same unstyled list also appears on iPhone, even though iPhone only shows a single column view at a time! I tried explicitly setting .listStyle(.insetGrouped) or .listStyle(.grouped) on the list in view B, but it makes no difference. When I go back to NavigationStack, the list in B is styled properly, just as expected — but then I lose the enhanced iPad layout. What I’m looking for: I’d like to keep using NavigationSplitView, but I want the list in the content column (view B) to use the default iOS list styling, at least on iPhone. Is there any way to achieve this? Thanks!
0
0
32
Aug ’25
How is the transition effect in Apple’s Calendar app built (month → day view)?
Hi everyone, I’m trying to recreate the beautiful transition effect used in Apple’s built-in Calendar app — specifically the one where, when you tap on a month, you’re “pulled into” the next view, and when going from month to day, the views seem to slide vertically, almost as if one is pushing the other off-screen. It’s not the standard right-to-left slide you get with NavigationStack or NavigationLink, and it feels much more immersive and dynamic. I’ve been experimenting with .matchedGeometryEffect and .transition(.move(...)) in a ZStack, and while I can replicate some aspects, I’m still missing that fluid, directional pull that makes it feel like you’re diving deeper into the calendar. I’m also unsure how much the view structure between the source and destination needs to match for the matchedGeometryEffect to really shine. Does anyone know what APIs or techniques Apple might be using internally to build that kind of animation? Is there a clean way to achieve something similar using SwiftUI as of iOS 17 or 18? Would love to hear if someone here has successfully replicated this or has tips on best practices. Thanks in advance!
Topic: UI Frameworks SubTopic: SwiftUI
0
0
25
Aug ’25
PresentationDetent to auto-size sheet to the height of the contained Views
(Also submitted as FB19359821) I suggest a PresentationDetent.sizeToFit or PresentationDetent.contentSize that automatically sizes the sheet to the height of the contained Views. This seems to be a common requirement for many app developers and it would be nice if this would be supported out of the box without fiddling around with the usual GeometryReader in background -> make available the height with a preference key -> .presentationDetents([.height(…)]) workarounds.
Topic: UI Frameworks SubTopic: SwiftUI
0
1
38
Aug ’25
iOS 26 AttributedString TextEditor bold and italic
Is there a way to constrain the AttributedTextFormattingDefinition of a TextEditor to only bold/italic/underline/strikethrough, without showing the full Font UI? struct CustomFormattingDefinition: AttributedTextFormattingDefinition { struct Scope: AttributeScope { let font: AttributeScopes.SwiftUIAttributes.FontAttribute let underlineStyle: AttributeScopes.SwiftUIAttributes.UnderlineStyleAttribute let strikethroughStyle: AttributeScopes.SwiftUIAttributes.StrikethroughStyleAttribute } var body: some AttributedTextFormattingDefinition<Scope> { ValueConstraint(for: \.font, values: [MyStyle.defaultFont, MyStyle.boldFont, MyStyle.italicFont, MyStyle.boldItalicFont], default: MyStyle.defaultFont) ValueConstraint(for: \.underlineStyle, values: [nil, .single], default: .single) ValueConstraint(for: \.strikethroughStyle, values: [nil, .single], default: .single) } } If I remove the Font attribute from the scope, the Bold and Italic buttons disappear. And if the Font attribute is defined, even if it's restricted to one typeface in 4 different styles, the full typography UI is displayed.
0
0
51
Aug ’25
Change iOS Keyboard Language without adding to Settings > Keyboards
The first-party Apple Translate app will switch the on-screen keyboard to the selected language, even when the keyboard for that language is NOT added in Settings > General > Keyboards. We'd like to mirror this behavior and switch the keyboard for input based on a user-selected language from a drop-down without the user needing to add that language to Keyboards I'm struggling to find if this behavior is achieved via a public API. Any insights here?
1
0
45
Aug ’25
On macOS, how do you place a toolbar item on the trailing edge of the window's toolbar when an Inspector view is open?
Using SwiftUI on macOS, how can I add a toolbar item on the right-most (trailing) edge of the window's toolbar when an Inspector is used? At the moment, the toolbar items are all left-of (leading) the split view tracking separator. I want the inspector toolbar item to be placed similar to where Xcode's Inspector toolbar item is placed: always as far right (trailing) as possible. NavigationSplitView { // ... snip } detail: { // ... snip } .inspector(isPresented: $isInspectorPresented) { InspectorContentView() } .toolbar { // What is the correct placement value here? ToolbarItem(placement: .primaryAction) { Button { isInspectorPresented.toggle() } label: { Label("Toggle Inspector", systemImage: "sidebar.trailing") } } } See the attached screenshot. When the InspectorView is toggled open, the toolbar item tracks leading the split view tracking separator, which is not consistent with how Xcode works.
Topic: UI Frameworks SubTopic: SwiftUI Tags:
4
0
72
Aug ’25
.disabled() doesn't VISUALLY disable buttons inside ToolbarItem on iOS 26 devices
[Also submitted as FB19313064] The .disabled() modifier doesn't visually disable buttons inside a ToolbarItem container on iOS 26.0 (23A5297i) devices. The button looks enabled, but tapping it doesn't trigger the action. When deployment target is lowered to iOS 18 and deployed to an iOS 18 device, it works correctly. It still fails on an iOS 26 device, even with an iOS 18-targeted build. This occurs in both the Simulator and on a physical device. Screen Recording Code struct ContentView: View { @State private var isButtonDisabled = false private var osTitle: String { let version = ProcessInfo.processInfo.operatingSystemVersion return "iOS \(version.majorVersion)" } var body: some View { NavigationStack { VStack { Button("Body Button") { print("Body button tapped") } .buttonStyle(.borderedProminent) .disabled(isButtonDisabled) Toggle("Disable buttons", isOn: $isButtonDisabled) Spacer() } .padding() .navigationTitle("Device: \(osTitle)") .navigationBarTitleDisplayMode(.large) .toolbar { ToolbarItem { Button("Toolbar") { print("Toolbar button tapped") } .buttonStyle(.borderedProminent) .disabled(isButtonDisabled) } } } } }
4
1
184
Aug ’25
SWIFTU UI - Graph package similar to Neo4J GUI
Is there a good library / opensource package for Graph library similar to Neo4J GUI (pl.see attached) I tried few of the below, looking for something better https://medium.com/better-programming/building-a-graph-with-swiftui-b16dc48f7fe6 https://github.com/palle-k/Graphite
Topic: UI Frameworks SubTopic: SwiftUI
1
0
95
Aug ’25
When removing a ToolbarItem from the navigation bar, how do I make the remaining ToolbarItems resize correctly?
Because .searchable does not allow for customizing buttons in the search bar, I've manually had to recreate the search bar as shown below. However, when removing one of the items in the search bar, the TextField does not resize correctly and effectively inserts padding on the leading edge. When the TextField is focused, it resizes and fills the entire space. If the "Compose" button was already hidden when the search bar is presented, it lays out correctly. How do I resize the TextField after removing the "Compose" button automatically? Thanks, jjp struct ContentView: View { @State var isSearchBarVisible = false @State var isComposingMessage = false @State var searchText = "" let items: [String] = ["hey", "there", "how", "are", "you"] var searchItems: [String] { items.filter { item in item.lowercased().contains(searchText.lowercased()) } } var body: some View { NavigationStack { VStack { List { if !searchText.isEmpty { ForEach(searchItems, id: \.self) { item in Text(item) } } else { ForEach(items, id: \.self) { item in Text(item) } } } } .toolbar { if isSearchBarVisible { ToolbarItem(placement: .principal) { TextField("Search", text: $searchText) .padding(8) .background(Color.gray.opacity(0.2)) } ToolbarItem(placement: .topBarTrailing) { Button(action: { isSearchBarVisible = false },[![enter image description here][1]][1] label: { Text("Cancel") }) } if !isComposingMessage { ToolbarItem(placement: .topBarTrailing) { Button(action: { isComposingMessage.toggle() }, label: { Text("Compose") }) } } } else { ToolbarItem(placement: .topBarLeading) { Button(action: { isSearchBarVisible = true }, label: { Text("Search") }) } ToolbarItem(placement: .principal) { Text("Title") } ToolbarItem(placement: .topBarTrailing) { Button(action: { isComposingMessage.toggle() }, label: { Text("Compose") }) } } } } } }
1
0
83
Aug ’25
[iOS 26] iOS App Does Not Receive Deep Link from Widget When Using widgetAccentedRenderingMode on Image
Summary When a SwiftUI widget uses a Link containing an Image modified with .widgetAccentedRenderingMode (using any mode except .fullColor), tapping the image on the widget launches the app but does not pass the expected deep link URL to the SceneDelegate. Steps to Reproduce Create a SwiftUI Widget View with a Link: struct ImageView: View { var image: UIImage var body: some View { Link(URL(string: "myapp://image")!) { Image(uiImage: image) .resizable() .widgetAccentedRenderingMode(.accentedDesaturated) // or any mode other than .fullColor .scaledToFill() .clipped() } } } Add Custom URL Scheme in Info.plist: <dict> <key>CFBundleURLName</key> <string>com.company.myapp</string> <key>CFBundleURLSchemes</key> <array> <string>myapp</string> </array> </dict> Implement Deep Link Handling in SceneDelegate: func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { if let url = connectionOptions.urlContexts.first?.url { handle(url) } } func scene(_ scene: UIScene, openURLContexts urlContexts: Set<UIOpenURLContext>) { if let url = urlContexts.first?.url { handle(url) } } private func handle(_ url: URL) { // Process URL here } Run the application on a device or simulator. Add the widget to the Home Screen. Tap the image inside the widget. Expected Result The application launches and receives the URL in SceneDelegate, as expected. Actual Result The application launches, but the URL is not passed to SceneDelegate. Both connectionOptions.urlContexts and openURLContexts are empty.
1
1
150
Aug ’25