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

CarPlay CPGridTemplate – buttons show in a row, and limited to 9 buttons
Hi, I’m working with CPGridTemplate in CarPlay. According to the documentation, it supports up to 9 CPGridButton objects and should display them in a grid (up to 3×3). However, I’ve run into two issues: Row instead of grid When I add 4–6 buttons, they don’t appear in a 2×2 or 2×3 grid. Instead, they are shown in a single horizontal row. Even 9 buttons do not appear in a 3x3 grid. More than 9 buttons My use case requires more than 9 icons, but it looks like CPGridTemplate ignores any additional buttons beyond the first 9. Is there any supported way to display more than 9 buttons in a grid, or is pagination/multiple templates the only option? Thanks in advance!
1
0
57
3w
Keyboard Toolbar Padding iOS26
When I create a SwiftUI toolbar item with placement of .keyboard on iOS 26, the item appears directly on top of and in contact with the keyboard. This does not look good visually nor does it match the behavior seen in Apple's apps, such as Reminders. Adding padding to the contents of the toolbar item only expands the size of the item but does not separate the capsule background of the item from the keyboard. How can I add vertical padding or spacing to separate the toolbar item capsule from the keyboard?
Topic: UI Frameworks SubTopic: SwiftUI
2
3
232
3w
DocumentBrowser toolbar behavior in SwiftUI apps
I’m building a document-based SwiftData app (iPhone/iPad/Mac). Here’s a minimal example of how I’m using DocumentGroup. DocumentGroup(editing: Trip.self, contentType: .trips) { ContentView() } if #available(iOS 18.0, *) { DocumentGroupLaunchScene { NewDocumentButton("New Trip") } } I’m struggling with the toolbar behavior in DocumentGroup apps. My content view uses a TabView, and each tab contains a NavigationSplitView. After I select a document in the document browser, I see my tabs. Regardless of which tab is selected, there’s a navigation bar showing the document name and a back button to the document browser. However, only the first tab shows the disclosure button to rename the document. I’d expect to be able to rename the document anywhere the name is shown. When I navigate to the detail view of my NavigationSplitView (or when using NavigationView/NavigationStack), I still see that back button to the document browser. When the user taps it, they expect to go back to the previous view, not to the document browser. What’s really odd is that even sheet or fullScreenCover presentations include these document UI elements in the navigation bar. I can’t get rid of them. Even if I set a title via the toolbar or navigationTitle, the rename disclosure button remains visible. Do DocumentGroup apps intentionally show their specific navigation bar everywhere? Is this a bug or expected behavior? And is it expected that the rename disclosure button appears only on the first tab of a TabView?
4
0
160
3w
Sharelink dismisses Parent View
Hello Folks, what's causing the "smart" dismiss after shareLink? this only happens when saving the photos. view -> opens a popover -> sharelink -> save to photo -> Allow photo Access -> ✅ view -> opens a popover -> sharelink -> save to photo -> [Observe popover dismisses ❌] popover should stay open Remember to add INFOPLIST_KEY_NSPhotoLibraryAddUsageDescription = save to album in project settings import SwiftUI @main struct sharepopoverDismissApp: App { var body: some Scene { WindowGroup { ContentView() } } } struct ContentView: View { @State private var showingSharePopover = false @State private var urlToShare: URL = Bundle.main.url(forResource: "BigBuckBunny", withExtension: "mp4") ?? URL(string: "https://www.example.com")! var body: some View { VStack { Button { showingSharePopover = true } label: { Label("Show Share Options", systemImage: "square.and.arrow.up") .font(.title2) .padding(.vertical, 10) .padding(.horizontal, 20) } .buttonStyle(.borderedProminent) .tint(.indigo) .controlSize(.large) .shadow(radius: 5) .popover(isPresented: $showingSharePopover, attachmentAnchor: .point(.center)) { ShareLinkPopoverView(url: urlToShare) } } .padding() } } struct ShareLinkPopoverView: View { let url: URL var body: some View { VStack(spacing: 20) { ShareLink(item: url) { Label("Share Now", systemImage: "square.and.arrow.up") .font(.headline) .padding(.vertical, 8) .padding(.horizontal, 15) } .interactiveDismissDisabled() .buttonStyle(.borderedProminent) .tint(.green) .controlSize(.regular) } .padding(20) .presentationCompactAdaptation(.popover) } }
3
0
118
3w
Toolbar button is clipped in iOS 26
When using a custom button style to generate the button label, it will be clipped. You can check below sample, the first one is render fine, but the second button with custom style will be clipped. struct ContentView: View { var body: some View { NavigationStack { List {} .toolbar { ToolbarItem(placement: .topBarLeading) { Button { } label: { HStack { Image(systemName: "chevron.backward") Text("Back") } } } ToolbarItem(placement: .topBarLeading) { Button { } label: { EmptyView() } .buttonStyle(MyButtonStyle()) } } .navigationTitle("Title") } } } struct MyButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { HStack { Image(systemName: "chevron.backward") Text("Back") } } }
Topic: UI Frameworks SubTopic: SwiftUI
4
0
177
3w
iOS 26 Beta 5 SwiftUI Picker(.pickerStyle(.segmented)) + Images(.symbolRenderingMode(.palette)) + Sheet = Freeze
App freezes when using a SwiftUI Picker with pickerStyle(.segment), Images with .symbolRenderingMode(.palette) and try to show a sheet. import SwiftUI enum Sample: String, CaseIterable, Identifiable { case aaa, bbb, ccc, ddd var id: Self { self } var image: Image { switch self { case .aaa: Image(systemName: "square.stack.3d.up.fill") case .bbb: Image(systemName: "square.and.arrow.up") case .ccc: Image(systemName: "square.and.arrow.up.fill") case .ddd: Image(systemName: "square.and.arrow.down") } } } struct PickerBug: View { @State private var selected: Sample = .aaa @State var showSheet = false var body: some View { List { Section { VStack { Picker("Qqq", selection: $selected) { ForEach(Sample.allCases) { sample in sample.image // .symbolRenderingMode(.palette) .foregroundStyle(.black) } } .pickerStyle(.segmented) } } Text("Aaa") } .toolbar { ToolbarItem(placement: .topBarTrailing) { Button { showSheet.toggle() } label: { Text("A") } } } .sheet(isPresented: $showSheet) { Text("Aaaa") } } } #Preview { NavigationStack { PickerBug() } } Uncomment .symbolRenderingMode(.palette) show the picker and the app freezes. Xcode, Preview and Simulator, i could not test on a real device.
0
0
96
3w
What does Observable protocol (not macro) conformance get you?
Hi, In the Apple Scrumdinger sample, the SpeechRecognizer class conforms to the Observable protocol: public actor SpeechRecognizer: Observable { public enum RecognizerError: Error { case nilRecognizer . . . The developer help text suggests that the protocol conformance does not add observation functionality. This class does not use the @Observable macro. So, how does this work under the hood?
1
0
73
3w
Ignore Home Screen Tint/Accents in Colored Components
I'm having some trouble getting my widget to display how I want when the user has a tint applied to their home screen. The issue I'm having is with a Text() element, as well as a LinearGradient I am displaying on top of my image. The text should always be white, and the gradient is always black with varying levels of opacity. I've managed to fix this issue with images displayed in my widget by leveraging widgetAccentedRenderingMode(.fullColor) however, there does not seem to be an equivalent of this for non-Image components. I'm aware of .widgetAccentable(false) but as I understand it, elements are already considered not accentable by default and you need to explicitly declare widgetAccentable(true) to add them to the accent group. I've tried specifying this to be false up and down my view hierarchy just to see if something will stick but no luck. Are there any other levers I can pull to preserve the declared colors for my text and gradient components? The images I am displaying is album artwork where preserving the original image is integral, but the tinted text color and overlaid gradient often clash or just looks bad in general. Is there a solution for colored primitive elements?
0
0
55
3w
Concentric corners not working
I want the gray view to have concentric corners with the device border. That works. Then I want the blue rectangle to have concentric corners with the gray view. That does not work. Instead the blue rectangle is also concentric with the device border. Once I add other content like a Text element, the corner radius breaks. How can I make this work? .containerShape does not take a ConcentricContainerShape. struct ContentView: View { var body: some View { List { Text("Content") } .overlay(alignment: .bottom) { content } .ignoresSafeArea(.all, edges: .bottom) } var content: some View { VStack(alignment: .leading) { Rectangle() .foregroundStyle(.blue) .frame(width: 100, height: 100) .clipShape(.rect(corners: .concentric, isUniform: true)) Text("Custom Container") } .padding(20) .frame(maxWidth: .infinity, alignment: .leading) .background(Color.gray, in: .rect(corners: .concentric, isUniform: true)) .padding(15) } }
2
0
79
3w
How to create an overlay with padding that ignores the safe area?
Was it always so tricky to ignore the bottom safe area? Seems like iOS 26 makes this much harder. I've tried many variations of ignoresSafeArea, safeAreaInset, safeAreaBar, etc. Nothing seems to work. As soon as I add padding, the bottom safe area crashes the party. This is what I want to achieve: This is what I get right now: struct ContentView: View { var body: some View { List { Text("Content") } .overlay(alignment: .bottom) { content } } var content: some View { VStack { Text("Custom Container") } .frame(maxWidth: .infinity) .frame(height: 400) .background(Color.gray, in: .rect(corners: .concentric, isUniform: true)) .padding(15) } }
3
0
82
3w
How do I use containerRelative on a grid in my widget?
I want to display a grid of items in my widget similar to the systemLarge Shortcuts app widget. I use clipShape(.containerRelative) to get the widget corner radius, but items that do not touch a corner in any way do not get this treatment. This is even worse with the extra large widget. How can I apply the corner radius of the widget minus the padding across all items? It does not seem like the radius is exposed outside of that special shape.
1
0
63
3w
Unable to get external display working
Trying to get my iPad app to display a different view on connected external display. Info.plist is setup as follows: <dict> <key>UIApplicationSceneManifest</key> <dict> <key>UIApplicationSupportsMultipleScenes</key> <true/> <key>UISceneConfigurations</key> <dict> <key>UIWindowSceneSessionRoleExternalDisplayNonInteractive</key> <array> <dict> <key>UISceneConfigurationName</key> <string>External Display</string> <key>UISceneDelegateClassName</key> <string>$(PRODUCT_MODULE_NAME).SceneDelegate</string> </dict> </array> </dict> </dict> </dict> I have my SceneDelegate setup as the follows: import SwiftUI class SceneDelegate: UIResponder, UIWindowSceneDelegate { var window: UIWindow? func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { guard let windowScene = scene as? UIWindowScene else { return } if session.role == .windowExternalDisplayNonInteractive { let window = UIWindow(windowScene: windowScene) window.rootViewController = UIHostingController(rootView: ExternalDisplayView()) self.window = window window.makeKeyAndVisible() } } } I've tested running on a physical iPad with usb-c to hdmi connected and it only mirror's the screen. Same when connecting to AirPlay. Also tested running a simulator with external display enabled. Is there something I'm missing?
Topic: UI Frameworks SubTopic: SwiftUI
3
0
79
3w
iOS 18 Subviews and Environment values
Hello 👋 I played with the iOS 18 Group(subviews:) APIs these days and I guess I'm missing a point. Environment values seems to not being passed to subviews when set within the Group(subviews:) API. See the following code: Is it intended to be that way ? How to propagate different values to different subviews in this case ? I heard of ContainerValues API but it seems to be a way to provide value at root level to access it during subview iteration. What I'm looking for is "insert"/"propagate" values to each subview during subview iteration. PS: This works but I have lost subview context this way (I'm out of the group). Thanks in advance for anyone answering this!
3
0
72
3w
Preventing a custom menu to close when the main window SwiftUI View is updating - (macOS App)
I reposted this issue from my previous post since I have a partial solution to it, and now have a more precise question. The previous post title was too broad. My app is not Document-based, the UI is written with SwiftUI and I had to implement the 'Open Recent' menu myself. The class RecentDiscsModel has a refresh() function that forces the new opened file to be seen in the menu. Without that, the app needed to be restarted to see them. (The files were appearing in the Dock menu, however.) My problem is, that when we open this 'Open Recent' menu, it closes when the UI is updating. My app being a Disc Player, the main and unique window UI is updating every second or more through many @Published properties from my AudioDiscPlayer class. I have no idea how to prevent this issue. @main struct MyApp: App @main struct MyApp: App { @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate @StateObject private var recentDiscsModel = RecentDiscsModel.shared var body: some Scene { Window("Player", id: "main-window") { PlayerView() } .commands { CommandGroup(replacing: .newItem) { } CommandGroup(after: .newItem) { Button("Open...") { NotificationCenter.default.post(name: .openDocumentRequested, object: nil) } .keyboardShortcut("O", modifiers: .command) if recentDiscsModel.recentDocs.isEmpty == false { Menu("Open Recent") { ForEach(NSDocumentController.shared.recentDocumentURLs, id: \.self) { url in Button(url.lastPathComponent) { global.insertDisc(at: url) } } Divider() Button("Clear Menu") { NSDocumentController.shared.clearRecentDocuments(nil) recentDiscsModel.refresh() } } } } PlayBackMenu() } } } class RecentDiscsModel: ObservableObject | The class that handles the live refresh of the 'Open Recent' menu class RecentDiscsModel: ObservableObject { static let shared = RecentDiscsModel() @Published private(set) var recentFiles: [URL] = [] private init() { refresh() } func refresh() { let newDocs = NSDocumentController.shared.recentDocumentURLs if newDocs != recentDocs { recentDocs = newDocs } } } class Globals: ObservableObject | This is the class that handling opening cueSheet file: class Globals: ObservableObject { static let shared = MCGlobals() init() {} @Published var errorMessage = "" @Published var errorDetails = "" @Published var showingErrorAlert = false func handleFileImport(result: Result<URL, Error>) { switch result { case .success(let url): guard url.startAccessingSecurityScopedResource() else { errorMessage = "Unable to access file" errorDetails = "Permission denied" showingErrorAlert = true return } defer { url.stopAccessingSecurityScopedResource() } insertDisc(at: url) case .failure(let error): errorMessage = "Failed to import file" errorDetails = error.localizedDescription showingErrorAlert = true } } func insertDisc(at url: URL, startPlayback: Bool = false) { do { try AudioDiscPlayer.shared.insertDisc(at: url, startPlayback: startPlayback) NSDocumentController.shared.noteNewRecentDocumentURL(url) } catch { let nsError = error as NSError errorMessage = nsError.localizedDescription let reason = nsError.localizedFailureReason ?? "" let recovery = nsError.localizedRecoverySuggestion ?? "" errorDetails = "\n\n\(reason)\n\n\(recovery)".trimmingCharacters(in: .whitespacesAndNewlines) showingErrorAlert = true } RecentDiscsModel.shared.refresh() } }
1
0
72
3w
Seeking Feedback on iOS 18.5/18.6 Behavior
Hi all, We’re developing hybrid apps using the Ionic Framework and testing them on Xcode. Recently, we tested our app on iOS 18.5 and 18.6 and noticed a strange issue: when trying to change elements like the range bar, the control only responds if we tap slightly above it. It seems like there’s a misalignment. This problem didn’t occur on earlier iOS versions. Is anyone else experiencing similar issues?
Topic: UI Frameworks SubTopic: SwiftUI
1
0
43
3w
SwiftUI's List backed by CoreData using @FetchRequest fails to update on iOS 26 when compiled with Xcode 26
Hey there! I've been tracking a really weird behavior with a List backed by @FetchRequest from CoreData. When I toggle a bool on the CoreData model, the first time it updates correctly, but if I do it a second time, the UI doesn't re-render as expected. This does not happen if I compile the app using Xcode 16 (targeting both iOS 18 and iOS 26), nor it happens when using Xcode 26 and targeting iOS 18. It only happens when building the app using Xcode 26 and running it on iOS 26. Here are two demos: the first one works as expected, when I toggle the state twice, both times updates. The second one, only on iOS 26, the second toggle fails to re-render. Demo (running from Xcode 16): Demo (running from Xcode 26): The code: import SwiftUI import CoreData @main struct CoreDataTestApp: App { let persistenceController = PersistenceController.shared var body: some Scene { WindowGroup { ContentView() .environment(\.managedObjectContext, persistenceController.container.viewContext) } } } struct ContentView: View { @Environment(\.managedObjectContext) private var viewContext @FetchRequest(sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)]) private var items: FetchedResults<Item> var body: some View { NavigationView { List { ForEach(items) { item in HStack { Text(item.timestamp!.formatted()) Image(systemName: item.isFavorite ? "heart.fill" : "heart").foregroundStyle(.red) }.swipeActions(edge: .leading, allowsFullSwipe: true) { Button(item.isFavorite ? "Unfavorite" : "Favorite", systemImage: item.isFavorite ? "heart" : "heart.fill") { toggleFavoriteStatus(item: item) } } } } .toolbar { ToolbarItem { Button(action: addItem) { Label("Add Item", systemImage: "plus") } } } } } private func addItem() { withAnimation { let newItem = Item(context: viewContext) newItem.timestamp = Date() newItem.isFavorite = Bool.random() try! viewContext.save() } } private func toggleFavoriteStatus(item: Item) { withAnimation { item.isFavorite.toggle() try! viewContext.save() } } } struct PersistenceController { static let shared = PersistenceController() let container: NSPersistentContainer init() { container = NSPersistentContainer(name: "CoreDataTest") container.loadPersistentStores(completionHandler: { _, _ in }) container.viewContext.automaticallyMergesChangesFromParent = true } }
5
0
171
3w
Source view disappearing when interrupting a zoom navigation transition
When I use the .zoom transition in a navigation stack, I get a glitch when interrupting the animation by swiping back before it completes. When doing this, the source view disappears. I can still tap it to trigger the navigation again, but its not visible on screen. This seems to be a regression in iOS 26, as it works as expected when testing on iOS 18. Has someone else seen this issue and found a workaround? Is it possible to disable interrupting the transition? Filed a feedback on the issue FB19601591 Screen recording: https://share.icloud.com/photos/04cio3fEcbR6u64PAgxuS2CLQ Example code @State var showDetail = false @Namespace var namespace var body: some View { NavigationStack { ScrollView { showDetailButton } .navigationTitle("Title") .navigationBarTitleDisplayMode(.inline) .navigationDestination(isPresented: $showDetail) { Text("Detail") .navigationTransition(.zoom(sourceID: "zoom", in: namespace)) } } } var showDetailButton: some View { Button { showDetail = true } label: { Text("Show detail") .padding() .background(.green) .matchedTransitionSource(id: "zoom", in: namespace) } } }
Topic: UI Frameworks SubTopic: SwiftUI
4
3
82
3w
Display .icon files in SwiftUI
Is there a way to display a .icon file in SwiftUI? I want to show the app icon in the app itself but exporting and including the app icon as a PNG feels redundant. This would consume a lot of unnecessary storage especially when including a lot of alternative app icons. There has to be a better way Otherwise I would file a feedback for that Thank you
0
5
72
4w