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

iOS 26 Liquid Glass - How to achieve separate glass backgrounds for multiple leading toolbar items?
I'm updating my app for iOS 26's new Liquid Glass design and encountering unexpected behavior with toolbar items. I want to display multiple buttons on the leading side of the navigation bar, each with its own glass background (similar to how LandmarkDetailView shows separate glass backgrounds for its toolbar items). Current Behavior: When using .navigationBarLeading placement for multiple ToolbarItems, they all group under ONE glass background When using NO placement (like in Apple's LandmarkDetailView example), items get separate glass backgrounds but appear on the RIGHT side Using different leading placements (.topBarLeading vs .navigationBarLeading) still groups them together What I've Tried: swift// Attempt 1: All items with same placement - they group together .toolbar { ToolbarItem(placement: .navigationBarLeading) { Button(action: {}) { Image(systemName: "dollarsign.circle") } } ToolbarItem(placement: .navigationBarLeading) { Button(action: {}) { Image(systemName: "qrcode") } } } // Attempt 2: No placement - separate glass but wrong position .toolbar { ToolbarItem { Button(action: {}) { Image(systemName: "dollarsign.circle") } } ToolbarSpacer(.fixed) ToolbarItem { Button(action: {}) { Image(systemName: "qrcode") } } ToolbarSpacer(.flexible) } // Attempt 3: Different placements - still groups .toolbar { ToolbarItem(placement: .topBarLeading) { Button(action: {}) { Image(systemName: "dollarsign.circle") } } ToolbarItem(placement: .navigationBarLeading) { Button(action: {}) { Image(systemName: "qrcode") } } } Environment: Xcode 26 Beta iOS 26.0 Beta Using NavigationView (also tried NavigationStack) This is a root view (no back button) Questions: Is grouping of same-placement toolbar items the intended Liquid Glass behavior? How can I achieve separate glass backgrounds for multiple leading toolbar items? Why do items without placement appear on the right in a root view? Is there new API or guidance for toolbar layouts in iOS 26? I've studied the LandmarkDetailView example from Apple, but it uses no placement and relies on being a detail view with a back button. My use case is a root navigation view. Any guidance would be appreciated!
Topic: UI Frameworks SubTopic: SwiftUI
2
0
154
2w
Lack of API to access scrubber preview time in AVPlayerViewController (scrubbingTime)
Hi everyone, I'm working with AVPlayerViewController in a tvOS/iOS app and ran into a limitation that I believe some developers face. When using player.currentItem?.currentTime(), we only get the playback time—which is fine while the video is playing. But when the player is paused and the user drags the scrubber, there's no public API to get the time that is currently being previewed under the scrubber thumb (stick), but there's no way to read it programmatically. This becomes a problem when trying to show thumbnail previews or display metadata tied to the scrubbed position.
Topic: UI Frameworks SubTopic: SwiftUI Tags:
0
1
33
2w
iOS26 beta ToolbarItem with placement to principal width is not fill to screen
I’m trying to add a TextField to the toolbar using .principal placement, and I want it to either fill the screen width or expand based on the surrounding content. However, it’s not resizing as expected — the TextField only resizes correctly when I provide a hardcoded width value. This behavior was working fine in previous versions of Xcode, but seems to be broken in Xcode 26. Not sure if this is an intentional change or a bug. i am using iOS26 beta and Xcode 26 beta struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) Text("Hello, world!") } .padding() .toolbar { ToolbarItem(placement: .principal) { HStack { TextField("Search", text: .constant("")) .textFieldStyle(.roundedBorder) .frame(maxWidth: .infinity) // .frame(width: 300) Button("cancel") { } } .frame(maxWidth: .infinity) } } } } #Preview { NavigationView { ContentView() } }
0
0
72
2w
AlarmMetadata struct
How can AlarmMetadata be implemented? I have referenced the sample code from "Scheduling an alarm with AlarmKit" and used the following: import AlarmKit struct CookingData: AlarmMetadata { let createdAt: Date /* other properties */ init() { self.createdAt = Date() /* other properties here */ } } But it always has the following errors: Main actor-isolated conformance of 'CookingData' to 'Decodable' cannot satisfy conformance requirement for a 'Sendable' type parameter of 'Self' Type 'CookingData' does not conform to protocol 'AlarmMetadata'. However in the sample App, this error is not there. Any other guidance on AlarmMetadata protocol besides the documentation?
Topic: UI Frameworks SubTopic: SwiftUI
2
0
49
2w
Search in a bottom toolbar
Dear all, The Search fields documentation appears to make a distinction between putting a search in a tab bar and in a bottom toolbar in an iOS device. Putting a search in a tab bar in iOS26 appears to be quick and easy: Tab(role: .search) { // Search } I cannot find, however, a way on how to put a search bar in a bottom toolbar (as illustrated here). The following code puts it in the top toolbar: .searchable(text: $searchQuery, placement: .toolbar) Same as this one: .searchable(text: $searchQuery, placement: .toolbarPrincipal) Do I miss something in this regard? Thanks!
1
0
93
2w
@Observable with generic typed throw breaks SwiftCompile
@Observable seems not to work well with generic typed throw. The following code using @Observable with non-generic typed throw builds good: @Observable class ThrowsLoadingViewModel<R, E: Error> { private(set) var isLoading = true private(set) var error: E? = nil private(set) var data: R? = nil private var task: () throws(Error) -> R init(task: @escaping () throws(E) -> R) { self.task = task } func load() { do throws(Error) { self.data = try task() } catch { // self.error = error } self.isLoading = false } } But if I change Line 7 and 14 to generic, it'll breaks the build with a "Command SwiftCompile failed with a nonzero exit code" message : @Observable class ThrowsLoadingViewModel<R, E: Error> { private(set) var isLoading = true private(set) var error: E? = nil private(set) var data: R? = nil private var task: () throws(E) -> R init(task: @escaping () throws(E) -> R) { self.task = task } func load() { do throws(E) { self.data = try task() } catch { // self.error = error } self.isLoading = false } } A the same time, if I remove @Observable, the generic typed throw works again: class ThrowsLoadingViewModel<R, E: Error> { private(set) var isLoading = true private(set) var error: E? = nil private(set) var data: R? = nil private var task: () throws(E) -> R init(task: @escaping () throws(E) -> R) { self.task = task } func load() { do throws(E) { self.data = try task() } catch { // self.error = error } self.isLoading = false } } Currently the possible solution seems to fall back to use ObservableObject...
0
0
19
2w
Applying the `.prominent` modifier to a toolbar action
Hi y'all! I'm creating an iOS app with SwiftUI. Part of the app's layout will have a toolbar. Per the HIG's Toolbar article, under the section titled "Actions", the primary action in the toolbar should use the .prominent modifier. Unfortunately, I'm having issues finding information about this modifier in the SwiftUI reference documentation, and Xcode's code completion (the standard completions; I don't use the language model version) doesn't reveal anything that seems to be usable to create the desired effect. For reference, this is what the view currently looks like: VStack { } .toolbar { ToolbarItem(placement: .topBarTrailing) { Button("Add Something", systemImage: "plus") { print("perform action") } } } Is this modifier added to the button itself as .buttonStyle(.borderedProminent)? This seems to create an odd off-center layout shift in the Xcode preview, the Simulator, and my physical device. Is it added to the toolbar item with a similarly-named modifier? Thanks all! :)
1
1
75
2w
Issues with .zoom NavigationTransition to a sheet with a .medium detent
When using a .zoom navigation transition, where .matchedTransitionSource is applied to a button in a toolbar and the destination view is a sheet which is presented with PresentationDetent.medium, the transition works initially, but shortly after it completes, the sheet's background is dimmed and the text of the source button reappears abruptly. Code and a screenshot are below, though the effect is best observed when interacting with the view. // // ContentView.swift // ZoomNavigationTransitionSample // // Created by Matthew DuBois on 6/15/25. // import SwiftUI struct ContentView: View { @State private var isPresentingSheet = false @Namespace private var namespace var body: some View { NavigationStack { List { Text("Some content") } .navigationTitle("Sample") .toolbar { ToolbarItem(placement: .topBarTrailing) { Button("Button") { isPresentingSheet = true } .matchedTransitionSource(id: "button", in: namespace) } } .sheet(isPresented: $isPresentingSheet) { Text("Some sheet content") .navigationTransition(.zoom(sourceID: "button", in: namespace)) .presentationDetents([.medium]) } } } } #Preview { ContentView() }
1
1
38
2w
Unable to find Slider/UISlider neutralValue
An WWDC 25 a neutral value was demonstrated that allows the Slider to be 'coloured in' from the point of the neutral value to the current thumb position. Trying to use this in Dev release 1 I get errors saying no such modifier. Was this functionality released in Dev Release 1 or am I using it incorrectly?
5
2
68
2w
SwiftUI TextEditor undo button
I'm using SwiftUI's TextEditor. I'd like to include an undo button in my UI that operates on the TextEditor. I don't see a way to hook this up. You can get the UndoManager from the environment, but this is not the undo manager the TextEditor is using. I know that UITextView uses an undocumented UndoManager (_UITextUndoManager) and I've accessed that before when using a UIViewRepresentable wrapper around UITextView. I'd like to achieve the same with TextEditor.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
33
2w
Core Transferable Error
I'm developing an app that uses the SwiftUI .photosPicker modifier to allow the user to open videos from their photos. While many videos successfully load, one video results in the following errors occurring: Error loading com.apple.quicktime-movie: <decode: bad range for [%@] got [offs:100 len:1229 within:0]> Error loading public.movie: <decode: bad range for [%@] got [offs:87 len:1229 within:0]> "The operation couldn’t be completed. (CoreTransferable.TransferableSupportError error 0.)" I was able to isolate the line of code within the Transferable where this occurs to be the following: try FileManager.default.copyItem(at: received.file, to: destination) Is there something that I can do to ensure the app can reliably open any video? The entire transferable struct is as follows: import Foundation import CoreTransferable import UniformTypeIdentifiers struct Video: Transferable { let url: URL let filename: String static var transferRepresentation: some TransferRepresentation { FileRepresentation(contentType: .mpeg4Movie) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .quickTimeMovie) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .avi) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .mpeg) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .mpeg2Video) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .video) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } FileRepresentation(contentType: .movie) { video in SentTransferredFile(video.url) } importing: { received in try Video.transfer(from: received) } } static func transfer(from received: ReceivedTransferredFile) throws -> Video { let destination = FileManager.default.temporaryDirectory.appendingPathComponent(received.file.lastPathComponent) if FileManager.default.fileExists(atPath: destination.path) { try FileManager.default.removeItem(at: destination) } try FileManager.default.copyItem(at: received.file, to: destination) return Video(url: destination, filename: received.file.lastPathComponent) } }
1
0
49
2w
Search field as in Mail App
How can i achieve the same behavior as the bottom bar on the Mail app? Button -> Search Field -> Button right now, if do as follows, they overlap as if they are not in the same space NavigationStack { VStack { HeaderView() ListView() } } .toolbar(.hidden, for: .tabBar) .searchable(text: $searchText) .searchToolbarBehavior(.minimize) .toolbar { ToolbarItem(placement: .bottomBar) { Button { } label: { Label("Button1", systemImage: "person") } } ToolbarItem(placement: .bottomBar) { Button { } label: { Label("Button2", systemImage: "person") } } }
1
0
70
2w
SwiftUI @State var not sync in .popover
struct ContentView: View { @State var visable: Bool = false @State var visableHiddenMenu: Bool = false var body: some View { VStack { Button("xxxx") { visableHiddenMenu = true print("visableHiddenMenu \(visableHiddenMenu)") visable.toggle() } .popover(isPresented: $visable) { VStack { let _ = print("visableHiddenMenu2 \(visableHiddenMenu)") Text("xxxx") } .onAppear { print("appear \(visableHiddenMenu)") visableHiddenMenu = visableHiddenMenu } } } .padding() } } the print is visableHiddenMenu true visableHiddenMenu2 false appear true so why visableHiddenMenu2 print false?
4
0
63
2w
Displaying an editing hierarchy in macOS
The SwiftUI Navigation structures work in ways that are not intuitive to me. For example, I am trying to display a set of data that represents rankings contained in a balloting system that I have created. The ballots all have candidates that are ranked from highest preference to lowest. Normally, I try to work backwards in SwiftUI, so I built the ballot editor to take a binding to the ballot itself: struct BallotEditor: View { @Binding var ballot: Election.Ballot var maxRank: Int var body: some View { VStack { ForEach($ballot.rankings) { $ranking in CandidateRankingPicker(maxRanking: maxRank, ranking: $ranking) } } } } This is embedded into a view with a list of ballots: struct BallotsView: View { @Binding var document: ElectionDocument var body: some View { List($document.ballots) { $ballot in NavigationLink { BallotEditor(ballot: $ballot, maxRank: document.election.candidates.count) .padding() } label: { BallotListElementView(ballot: ballot) } } } } This portion works in the editor. When the ballot is selected, the editor populates the selected candidate choices, and the editing works. However, when I attempt to insert BallotsView into a TabView, the NavigationLink stops working as expected. I didn't think NavigationLink was the proper way to do this, but it had been working. TabView { Tab("Ballots", systemImage: "menucard") { BallotsView(document: $document) } Tab { CandidateView() } label: { Text("Candidates") } .tabViewStyle(.sidebarAdaptable) } This is my third iteration. I have tried using a List with selection, but in that case, I am unable to pass the binding to the detail view. I just don't understand how this works, and I am preparing a version in Cocoa so that I don't have to deal with it anymore.
2
0
54
2w
Using .glassEffect in Charts
Hi, I was wondering if it's possible (and advisable) to use the new glass effects available in iOS 26 in Swift Charts? For example, in a chart like the one in the image I've attached to this post, I was looking to try adding a .glassEffect modifier to the BarMarks to see how that would look and feel. However, it seems it's not available directly on the BarMark (ChartContent) type, and I'm having trouble adding it in other ways too, such as using in on the types I supply to modifiers like foregroundStyle or clipShape. Am I missing anything? Maybe it's just not advisable or necessary to use glass effects within Charts?
3
0
106
2w