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

TabView Alignment Issue Inside a Popover on iPadOS
I've encountered an issue when using TabView inside a Popover on iPadOS, and I wanted to see if anyone else has run into this or if there's a known workaround before I file a bug report. Issue: When placing a TabView inside a Popover on iPadOS, the tab bar is not center-aligned correctly if the popover’s arrow appears on either the leading or trailing edge. It seems that the centering calculation for the TabView includes the width of the arrow itself. If the popover arrow is on the left, the tabs inside the TabView are pushed to the left. If the popover arrow is on the right, the tabs shift toward the right. This suggests that SwiftUI is incorporating the popover arrow’s width into the alignment calculation, which results in the misalignment. Questions: Has anyone else encountered this behavior? Is there a known workaround to ensure proper centering? If this is indeed a bug, should I file a report through Feedback Assistant? Any insights would be greatly appreciated!
0
0
7
11h
ForEach with binding seems to be broken in iOS 18.3.1 and iOS 18.4
Super easy to reproduce. Swiping to delete on the last remaining item in the list causes an index out of bounds exception. If you have 2 items in your list, it will only happen when you delete the last remaining item. From my testing, this issue occurs on 18.3.1 and onward (the RC it happens). I didn't test 18.3.0 so it might happen there as well. The only workarounds I have found is to add a delay before calling my delete function: OR to comment out the Toggle. So it seems as though iOS 18.3.x added a race condition in the way the ForEach accesses the values in its binding. Another thing to note, this also happens with .swipeActions, EditMode, etc... any of the built in ways to delete an item from a list. import SwiftUI struct ContentView: View { @StateObject var viewModel = ContentViewModel() var body: some View { List { ForEach($viewModel.items) { $item in HStack { Image(systemName: "globe") .imageScale(.large) .foregroundStyle(.tint) Text($item.text.wrappedValue) Spacer() Toggle(String(""), isOn: $item.isActive) .labelsHidden() } } .onDelete(perform: delete) } } func delete(at offsets: IndexSet) { // uncomment task to make code not crash // Task { viewModel.deleteItem(at: offsets) // } } } struct MyItem: Identifiable { var id: UUID = UUID() var text: String var isActive: Bool } class ContentViewModel: ObservableObject { @Published var items: [MyItem] = [MyItem(text: "Hello, world!", isActive: false)] func deleteItem(at offset: IndexSet) { items.remove(atOffsets: offset) } }
0
1
26
11h
[Suggestion] SwiftUI convenience environment navigation functions
I've been thinking a lot about how navigation and presentation are managed in SwiftUI, and I wanted to propose an idea for a more streamlined approach using environment values. Right now, handling navigation can feel fragmented — especially when juggling default NavigationStack, modals, and tab selections. What if SwiftUI provided a set of convenience environment values for these common actions? Tabs @Environment(\.selectedTab) var selectedTab @Environment(\.selectTab) var selectTab selectedTab: Read the current tab index selectTab(index: Int): Programmatically switch tabs Stack Navigation @Environment(\.stackCount) var stackCount @Environment(\.push) var push @Environment(\.pop) var pop @Environment(\.popToRoot) var popToRoot stackCount: Read how many views are in the navigation stack push(destination: View): Push a new view onto the stack pop(last: Int = 1): Pop the last views popToRoot(): Return to the root view Modals @Environment(\.sheet) var sheet @Environment(\.fullScreenCover) var fullScreenCover @Environment(\.popover) var popover @Environment(\.dismissModal) var dismissModal sheet(view: View): Present a sheet fullScreenCover(view: View): Present a full-screen cover popover(view: View): Show a popover dismissModal(): Dismiss any presented modal Alerts & Dialogs @Environment(\.alert) var alert @Environment(\.confirmationDialog) var confirmationDialog @Environment(\.openAppSettings) var openAppSettings alert(title: String, message: String): Show an alert confirmationDialog(title: String, actions: [Button]): Show a confirmation dialog openAppSettings(): Directly open the app’s settings Why? Clean syntax: This keeps navigation code clean and centralized. Consistency: Environment values already manage other app-level concerns (color scheme, locale, etc.). Why not navigation too? Reusability: This approach is easy to adapt across different view hierarchies. Example @main struct App: App { var body: some Scene { WindowGroup { TabView { NavigationStack { ProductList() } .tabItem { ... } NavigationStack { OrderList() } .tabItem { ... } } } } } struct ProductList: View { @Environment(\.push) var push @State var products: [Product] = [] var body: some View { List(protucts) { product in Button { push(destination: ProductDetails(product: product)) } } label: { ... } } .task { ... } } } struct ProductDetails: View { ... }
3
0
21
16h
Animate layout change
I want to show a view, where the user can add or remove items shown as icons, which are sorted in two groups: squares and circles. When there are only squares, they should be shown in one row: [] [] [] When there are so many squares that they don’t fit horizontally, a (horizontal) scrollview will be used, with scroll-indicator always shown to indicate that not all squares are visible. When there are only circles, they also should be shown in one row: () () () When there are so many circles that they don’t fit horizontally, a (horizontal) scrollview will be used, with scroll-indicator always shown to indicate that not all circles are visible. When there a few squares and a few circles, they should be shown adjacent in one row: [] [] () () When there are so many squares and circles that they don’t fit horizontally, they should be shown in two rows, squares on top, circles below: [] [] [] () () () When there are either too many squares or too many circles (or both) to fit horizontally, one common (horizontal) scrollview will be used, with scroll-indicator always shown to indicate that not all items are visible. I started with ViewThatFits: (see first code block) { let squares = HStack { ForEach(model.squares, id: \.self) { square in Image(square) } } let circles = HStack { ForEach(model.circles, id: \.self) { circle in Image(circle) } } let oneLine = HStack { squares circles } let twoLines = VStack { squares circles } let scrollView = ScrollView(.horizontal) { twoLines }.scrollIndicators(.visible) ViewThatFits(in: .horizontal) { oneLine twoLines scrollView.clipped() } } While this works in general, it doesn’t animate properly. When the user adds or removes an image the model gets updated, (see second code block) withAnimation(Animation.easeIn(duration: 0.25)) { model.squares += image } and the view animates with the existing images either making space for a new appearing square/circle, or moving together to close the gap where an image disappeared. This works fine as long as ViewThatFits returns the same view. However, when adding 1 image leads to ViewThatFits switching from oneLine to twoLines, this switch is not animated. The circles jump to the new position under the squares, instead of sliding there. I searched online for a solution, but this seems to be a known problem of ViewThatFits. It doesn't animate when it switches... (tbc)
1
0
21
17h
iOS 18.1 SwiftUI popover crash
When trying to debug a mysterious app crash pointing to some layoutIfNeeded() method call, me and my QA team member reduced it to this sample app. struct ContentView: View { @State var isPresented = false var body: some View { VStack { Button { isPresented = true } label: { Text("show popover") } .popover(isPresented: $isPresented) { Text("hello world") } } .padding() } }` This code crashes on his iPad iOS 18.1.0 22B5034E with EXC_BAD_ACCESS error. It is not reproducible on simulator or on device with iOS 18.2 or iOS 17. Is this a known issue? Are there any known workarounds? I've found similar posts here https://developer.apple.com/forums/thread/769757 https://developer.apple.com/forums/thread/768544 But they are about more specific cases.
1
0
45
23h
SwiftUI not displaying correctly (extend to all screen) on app across visionOS & iOS
As seen in the screenshot below, I set up a visionOS project at the beginning in Xcode 16 and later add iOS as a different platform it's also running. And I use swiftUI as the framework for UI layout here. It runs smoothly on visionOS. However, when it comes to iOS, even if I have included modifiers as .edgesIgnoringSafeArea(.all), the display still shrinks to only weird certain area on the screen (I also tried to modify the ContentView() window size in App file and it doesn't work). Anybody has any idea for the across platform UI settings? What should I do to make the UI on iOS display normally (and it looks even more weird when it comes to Tab bars)?
1
0
14
1d
Buttons in menu don't respect the environment value of .layoutDirection in SwiftUI
Problem Setting ".environment(.layoutDirection, .rightToLeft)" to a view programmatically won't make buttons in menu to show right to left. However, setting ".environment(.locale, .init(identifier: "he-IL"))" to a view programmatically makes buttons in menu to show Hebrew strings correctly. Development environment: Xcode 16.x, macOS 15.3.1 Target iOS: iOS 17 - iOS 18 The expected result is that the button in the menu should be displayed as an icon then a text from left to right. Code to demonstrate the problem: struct ContentView: View { var body: some View { VStack(alignment: .leading) { Text("Buttons in menu don't respect the environment value of .layoutDirection") .font(.subheadline) .padding(.bottom, 48) /// This button respects both "he-IL" of ".locale" and ".rightToLeft" of ".layoutDirection". Button { print("Button tapped") } label: { HStack { Text("Send") Image(systemName: "paperplane") } } Menu { /// This button respects "he-IL" of ".locale" but doesn't respect ".rightToLeft" of ".layoutDirection". Button { print("Button tapped") } label: { HStack { Text("Send") Image(systemName: "paperplane") } } } label: { Text("Menu") } } .padding() .environment(\.locale, .init(identifier: "he-IL")) .environment(\.layoutDirection, .rightToLeft) } }
2
0
25
1d
SwiftUI update master list from detail view
Simple master screen with list, NavigationLink to editable detail view. I want edits on the detail screen to update to the master list "cars" variable and the list UI. On the detail view, if I edit one field and exit the field, the value reverts to the original value. Why? If I edit one field, don't change focus and hit the back button. The master list updates. This is what I want, but I can only update 1 field because of problem #1. Should be able to edit all the fields. If I implement the == func in the Car struct, then no updates get saved. Why? struct Car: Hashable, Equatable { var id: UUID = UUID() var make: String var model: String var year: Int // static func == (lhs: Car, rhs: Car) -> Bool { // return lhs.id == rhs.id // } } struct ContentView: View { @State private var cars: [Car] init() { cars = [ Car(make: "Toyota", model: "Camry", year: 2020), Car(make: "Honda", model: "Civic", year: 2021), Car(make: "Ford", model: "Mustang", year: 2022), Car(make: "Chevrolet", model: "Malibu", year: 2023), Car(make: "Nissan", model: "Altima", year: 2024), Car(make: "Kia", model: "Soul", year: 2025), Car(make: "Volkswagen", model: "Jetta", year: 2026) ] } var body: some View { NavigationStack { VStack { ForEach($cars, id: \.self) { $car in NavigationLink(destination: CarDetailView(car: $car)){ Text(car.make) } } } } } } struct CarDetailView: View { @Binding var car: Car var body: some View { Form { TextField("Make", text: $car.make) TextField("Model", text: $car.model) TextField("Year", value: $car.year, format: .number) } } }
1
0
29
1d
UIKit or SwiftUI First? Exploring the Best Hybrid Approach
UIKit and SwiftUI each have their own strengths and weaknesses: UIKit: More performant (e.g., UICollectionView). SwiftUI: Easier to create shiny UI and animations. My usual approach is to base my project on UIKit and use UIHostingController whenever I need to showcase visually rich UI or animations (such as in an onboarding presentation). So far, this approach has worked well for me—it keeps the project clean while solving performance concerns effectively. However, I was wondering: Has anyone tried the opposite approach? Creating a project primarily in SwiftUI, then embedding UIKit when performance is critical. If so, what has your experience been like? Would you recommend this approach? I'm considering this for my next project but am unsure how well it would work in practice.
1
0
31
2d
Scroll up and bounce back loop issue when wrapping LazyVstack within a NavigationStack
The issue I'm facing arise when using a lazyvstack within a navigationstack. I want to use the pinnedViews: .sectionHeaders feature from the lazyStack to display a section header while rendering the content with a scrollview. Below is the code i'm using and at the end I share a sample of the loop issue: struct SProjectsScreen: View { @Bindable var store: StoreOf<ProjectsFeature> @State private var searchText: String = "" @Binding var isBotTabBarHidden: Bool @Environment(\.safeArea) private var safeArea: EdgeInsets @Environment(\.screenSize) private var screenSize: CGSize @Environment(\.dismiss) var dismiss private var isLoading : Bool { store.projects.isEmpty } var body: some View { NavigationStack(path:$store.navigationPath.sending(\.setNavigationPath)) { ScrollView(.vertical){ LazyVStack(spacing:16,pinnedViews: .sectionHeaders) { Section { VStack(spacing:16) { if isLoading { ForEach(0..<5,id:\.self) { _ in ProjectItemSkeleton() } } else{ ForEach(store.projects,id:\._id) { projectItem in NavigationLink(value: projectItem) { SProjectItem(project: projectItem) .foregroundStyle(Color.theme.foreground) } .simultaneousGesture(TapGesture().onEnded({ _ in store.send(.setCurrentProjectSelected(projectItem.name)) })) } } } } header: { VStack(spacing:16) { HStack { Text("Your") Text("Projects") .fontWeight(.bold) Text("Are Here!") } .font(.title) .frame(maxWidth: .infinity,alignment: .leading) .padding(.horizontal,12) .padding(.vertical,0) HStack { SSearchField(searchValue: $searchText) Button { } label: { Image(systemName: "slider.horizontal.3") .foregroundStyle(.white) .fontWeight(.medium) .font(.system(size: 24)) .frame(width:50.66,height: 50.66) .background { Circle().fill(Color.theme.primary) } } } } .padding(.top,8) .padding(.bottom,16) .background(content: { Color.white }) } } } .scrollIndicators(.hidden) .navigationDestination(for: Project.self) { project in SFoldersScreen(project:project,isBotTabBarHidden: $isBotTabBarHidden) .toolbar(.hidden) } .padding(.horizontal,SScreenSize.hPadding) .onAppear { Task { if isLoading{ do { let projectsData = try await ProjectService.Shared.getProjects() store.send(.setProjects(projectsData)) } catch{ print("error found: ",error.localizedDescription) } } } } .refreshable { do { let projectsData = try await ProjectService.Shared.getProjects() store.send(.setProjects(projectsData)) } catch{ print("error found: ",error.localizedDescription) } } }.onChange(of: store.navigationPath, { a, b in print("Navigation path changed:", b) }) } } I'm using tca library for managing states so this is my project feature reducer: import ComposableArchitecture @Reducer struct ProjectsFeature{ @ObservableState struct State: Equatable{ var navigationPath : [Project] = [] var projects : [Project] = [ ] var currentProjectSelected : String? } enum Action{ case setNavigationPath([Project]) case setProjects([Project]) case setCurrentProjectSelected(String?) case popNavigation } var body: some ReducerOf<Self> { Reduce { state, action in switch action { case .setNavigationPath(let navigationPath): state.navigationPath = navigationPath return .none case .setProjects(let projects): state.projects = projects return .none case .setCurrentProjectSelected(let projectName): state.currentProjectSelected = projectName return .none case .popNavigation: if !state.navigationPath.isEmpty { state.navigationPath.removeLast() } state.currentProjectSelected = nil return .none } } }
1
0
23
2d
Dynamic island not displaying UI views
i finally got previews for dynamic island to work and I'm just trying to first work on adding a static UI elements to my dynamic island like i did for my live screen live activity, but my dynamic island view is showing up totally empty, if i add my app icon image to the compact leading closure, it doesn't appear, if i ad text to an expanded region closure it doesn't appear. am really stuck on this and would approeciate the help. var body: some View { Image("dynamicrep") .resizable() .scaledToFit() .clipShape(.circle) } } struct DynamicRepLiveActivity: Widget { var body: some WidgetConfiguration { ActivityConfiguration(for: DynamicRepAttributes.self) { context in VStack { HStack(spacing: 257) { Text("from \(context.attributes.titleName ?? "no title")") .fontWeight(.light) .font(.system(size: 16)) .foregroundStyle(Color.gray) Circle() .frame(width: 53, height: 50) .foregroundStyle(Color.gray).opacity(0.23) .overlay { Image("mmicon") } } .frame(maxWidth: 500, maxHeight: 210) Spacer() Text("\(context.attributes.contentBody ?? "no content")") } .activityBackgroundTint(Color.cyan) .activitySystemActionForegroundColor(Color.black) .frame(width: 500, height: 300) } dynamicIsland: { context in DynamicIsland { // Expanded UI goes here. Compose the expanded UI through // various regions, like leading/trailing/center/bottom DynamicIslandExpandedRegion(.leading) { Text("from \(context.attributes.titleName ?? "no title")") } DynamicIslandExpandedRegion(.trailing) { Circle() } DynamicIslandExpandedRegion(.bottom) { Text("\(context.attributes.contentBody ?? "no content")") } } compactLeading: { AppLogo() } compactTrailing: { Text("") //empty for now } minimal: { Text("hello") //empty for now } .widgetURL(URL(string: "MuscleMemory.KimchiLabs.com")) .keylineTint(Color.white) } } }
0
0
25
3d
Markdown openURL can not handle property url
I'm trying to render a markdown with a link using Text. If the URL of the link is a static string, then no problem. If the URL is a property, then OpenURLAction gets a string ‘%25@’. I think this may be a bug. struct ContentView: View { let url = "https://www.google.com" var body: some View { Text("[Terms of Service](\(url))") .environment(\.openURL, OpenURLAction(handler: { url in print(url) return .handled })) } }
1
0
25
3d
Open Document from Files App
What particular configuration will allow a document based app (DocumentGroup) to open the application into the selected document when the document is touched in Files.app. The sample code doesn't show this behaviour and instead will open the app but will not open the selected document. This also is the behaviour with the Xcode document based app template. Using LSSupportsOpeningDocumentsInPlace = YES in the plist does not make any difference. .onOpenURL is not a modifier on Scene only View and if the app is opened from cold the document view will not exist. In any case I would expect the DocumentGroup to open the document directly with no further intervention. What additional magic do I need to get a document to open directly from Files.app (or Messages) . For example Swift Playgrounds shows the correct behaviour, opening the selected project directly.
Topic: UI Frameworks SubTopic: SwiftUI
0
0
28
5d
How to test cloudkit containers
I'm trying to find a way to create and use a test cloudkit container in my swiftdata-backed app. I want to test pre-filling the model container with localized content at first run. To do this I created a test cloudkit container, and assigned it to my debug build profile in settings and capabilities. I then conditionally reference the test container in my apps cloudkit manager, i.e.: private let db: CKDatabase init() { #if DEBUG let container = CKContainer(identifier: "iCloud.com.team-name.myappname.testing-de") // Test CloudKit container #else let container = CKContainer(identifier: "iCloud.com.team-name.myappname") // Production CloudKit container #endif self.db = container.privateCloudDatabase } But when I run my app in debug, content is still created in the primary/production container. Am I missing something? Or is there a better, or documented, way to test cloudkit more robustly?
1
0
37
6d
NavigationStack inside NavigationSplitView broken animation
In tvOS when using NavigationStack inside NavigationSplitView as below: @State private var selectedItem: String? @State private var navigationPath = NavigationPath() // Track navigation state manually var body: some View { NavigationSplitView { List(selection: $selectedItem) { Button("Item 1") { selectedItem = "Detail View 1" } Button("Item 2") { selectedItem = "Detail View 2" } } } detail: { NavigationStack(path: $navigationPath) { DetailView() .navigationDestination(for: String.self) { value in Text("New Screen: \(value)") } } } } } This example completely breaks the animation inside NavigationStack while navigating between different views, using withAnimation also breaks the navigation as the old view seems to be still in stack and is shown in the new view background. I have also submitted bug report: https://feedbackassistant.apple.com/feedback/16933927
0
0
23
6d
UITextView in SwiftUI Not Scrolling to Position When Becoming First Responder
I'm implementing a custom text editor in SwiftUI using a UITextView wrapped in a UIViewRepresentable. The text editor works for basic text entry, but I'm encountering an issue with scrolling behavior. When the UITextView becomes the first responder (when tapped), the parent ScrollView doesn't automatically scroll to make the text view visible. Instead, the scroll position jumps to the last known position (scrolls to a different text view that was previously focused). Here's my implementation reduced to the minimum: struct SpacedTextEditor: View { @Binding var text: String var body: some View { MinimalEditor(text: $text) } } private struct MinimalEditor: UIViewRepresentable { @Binding var text: String func makeUIView(context: Context) -> UITextView { let textView = UITextView() textView.backgroundColor = .clear textView.delegate = context.coordinator textView.isScrollEnabled = false textView.text = text return textView } func updateUIView(_ textView: UITextView, context _: Context) { if textView.text != text { textView.text = text } } func makeCoordinator() -> Coordinator { Coordinator(text: $text) } class Coordinator: NSObject, UITextViewDelegate { var text: Binding<String> init(text: Binding<String>) { self.text = text } func textViewDidChange(_ textView: UITextView) { text.wrappedValue = textView.text } } } The text editor is placed inside a ScrollView in my parent view. How can I ensure that when a user taps on the text editor, the ScrollView properly scrolls to make it fully visible or at least it doesn't jump to where the textfield is not even visible? I need to use a custom textfield because I need to be able to modify the space between lines, and I didn't find a way to do this using the swiftUI component.
Topic: UI Frameworks SubTopic: SwiftUI
1
0
37
1w
iOS document based app problem running on Mac (Designed for iPad)
Please can somebody help me? I have a document-based iOS in the App Store (iNetWorth). I was able to run it on my M1 Mac Mini as a Mac (Designed for iPad) app without any issues until macOS 15. So, I created a simple test app based on a TabView to try and find out why I cannot get iNetWorth to run successfully on my Mac. The issue is that when TabViewApp.swift file looks like this: import SwiftUI @main struct TabViewApp: App { var body: some Scene { /*WindowGroup { ContentView() }*/ DocumentGroup(newDocument: TextFile()) { file in ContentView(document: file.$document) } } } TabView fails to load the ContentView() - in Xcode 16.2 running on macOS 15.3.2. On opening, the TabView app prompts the user to open a new or existing file normally but it then opens a window that is empty, apart from a Documents button and a label displaying the filename with a dropdown menu (Duplicate, Move, Rename..., Export As…). If the @Binding var document: TextFile line is removed from the ContentView() and the TabViewApp.swift file is changed to: import SwiftUI @main struct TabViewApp: App { var body: some Scene { WindowGroup { ContentView() } /*DocumentGroup(newDocument: TextFile()) { file in ContentView(document: file.$document) }*/ } } the TabView app loads and displays the ContentView() correctly. Both versions of TabView, when running in Xcode on My Mac (Designed for iPad), produce these warnings: CLIENT: Failure to determine if this machine is in the process of shutting down, err=1/Operation not permitted LSPrefs: could not find untranslocated node for &lt;FSNode 0x6000013901a0&gt; { isDir = ?, path = '/private/var/folders/3f/8788c4dj50q050_4wg9fssbr0000gp/X/518B55E1-0EC4-5D84-9202-4E44410EB249/d/Wrapper/TabView.app' }, proceeding on the assumption it is not translocated: Error Domain=NSPOSIXErrorDomain Code=1 "Operation not permitted" LSPrefs: could not find untranslocated node for &lt;FSNode 0x6000013901a0&gt; { isDir = ?, path = '/private/var/folders/3f/8788c4dj50q050_4wg9fssbr0000gp/X/518B55E1-0EC4-5D84-9202-4E44410EB249/d/Wrapper/TabView.app' }, proceeding on the assumption it is not translocated: Error Domain=NSPOSIXErrorDomain Code=1 "Operation not permitted" LSPrefs: could not find untranslocated node for &lt;FSNode 0x6000013901a0&gt; { isDir = ?, path = '/private/var/folders/3f/8788c4dj50q050_4wg9fssbr0000gp/X/518B55E1-0EC4-5D84-9202-4E44410EB249/d/Wrapper/TabView.app' }, proceeding on the assumption it is not translocated: Error Domain=NSPOSIXErrorDomain Code=1 "Operation not permitted" LSPrefs: could not find untranslocated node for &lt;FSNode 0x6000013901a0&gt; { isDir = ?, path = '/private/var/folders/3f/8788c4dj50q050_4wg9fssbr0000gp/X/518B55E1-0EC4-5D84-9202-4E44410EB249/d/Wrapper/TabView.app' }, proceeding on the assumption it is not translocated: Error Domain=NSPOSIXErrorDomain Code=1 "Operation not permitted” However, the document-based version of TabView also displays these warnings: cannot open file at line 49450 of [1b37c146ee] os_unix.c:49450: (2) open(/private/var/db/DetachedSignatures) - No such file or directory I suspect that the lack of the DetachedSignatures file is the root cause of the ContentView() not being loaded but I cannot find out how to generate a DetachedSignatures file. Adding an empty DetachedSignatures file or directory to /private/var/db/ does not help. Has anyone else experienced this problem (and maybe found a solution)? Should I raise it as a bug via Feedback or am I missing something obvious? Thanks!
2
0
26
1w