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

SwiftUI Documentation

Post

Replies

Boosts

Views

Activity

Access Environment values through PresentationDetents.Context
I want to create a custom presentation detent to set a custom height for a sheet presentation. For that, I added a struct conforming to CustomPresentationDetent which has an only method static function height(in: Self.Context) -> CGFloat?. Implementation works fine, the view presented inside the sheet modifier has the height returned by the custom detent. The problem comes when I try to access the Context's environment values inside the protocol conformance method. PresentationDetent.Context has a subscript that enables accessing any environment value subscript<T>(dynamicMember _: KeyPath<EnvironmentValues, T>) -> T but using it from the custom detents height method only returns the default value for each one. I'm trying to set the environment values through environment<V>(WritableKeyPath<EnvironmentValues, V>, V) modifier but it does not seem to work. When accessed via @Environment property wrapper from the view it does get the updated value though. Is there any other way to set an environment value or any special way to set it so that it is visible from a presentation detent?
3
0
213
Aug ’24
Issue with SwiftUI NavigationStack, Searchable Modifier, and Returning to Root View
I'm facing an issue with SwiftUI's NavigationStack when using the searchable modifier. Everything works as expected when navigating between views, but if I use the search bar to filter a list and then tap on a filtered result, I can navigate to the next view. However, in the subsequent view, my "Set and Return to Root" button, which is supposed to call popToRoot(), does not work. Here's the setup: Structure: RootView: Contains a list with items 1-7. ActivityView: Contains a list of activities that can be filtered with the searchable modifier. SettingView: Contains a button labeled "Set and Return to Root" that calls popToRoot() to navigate back to the root view. RootView struct RootView: View { @EnvironmentObject var navManager: NavigationStateManager var body: some View { NavigationStack(path: $navManager.selectionPath) { List(1...7, id: \.self) { item in Button("Element \(item)") { // Navigate to ActivityView with an example string navManager.selectionPath.append(NavigationTarget.activity) } } .navigationTitle("Root View") .navigationDestination(for: NavigationTarget.self) { destination in switch destination { case .activity: ActivityView() case .settings: SettingsView() } } } } } ActivityView struct ActivityView: View { @EnvironmentObject var navManager: NavigationStateManager let activities = ["Running", "Swimming", "Cycling", "Hiking", "Yoga", "Weightlifting", "Boxing"] @State private var searchText = "" var filteredActivities: [String] { if searchText.isEmpty { return activities } else { return activities.filter { $0.localizedCaseInsensitiveContains(searchText) } } } var body: some View { List { ForEach(filteredActivities, id: \.self) { activity in NavigationLink( destination: SettingsView(), // Navigiere zur SettingsView label: { HStack { Text(activity) .padding() Spacer() } } ) } } .navigationTitle("Choose Activity") .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search Activities") } } SettingView struct SettingsView: View { @EnvironmentObject var navManager: NavigationStateManager var body: some View { VStack { Text("Settings") .font(.largeTitle) .padding() Button("Set and Return to Root") { // Pop to the root view when the button is pressed navManager.popToRoot() } .padding() .background(Color.blue) .foregroundColor(.white) .cornerRadius(10) } .navigationTitle("Settings") } } NavigationStateManager // Define enum globally at the top enum NavigationTarget { case activity case settings } class NavigationStateManager: ObservableObject { @Published var selectionPath = NavigationPath() func popToRoot() { selectionPath = NavigationPath() } func popView() { selectionPath.removeLast() } } Problem When I search in the ActivityView and tap on a filtered result, I successfully navigate to the SettingView. However, in this view, pressing the "Set and Return to Root" button does not trigger the navigation back to RootView, even though popToRoot() is being called. This issue only occurs when using the search bar and filtering results. If I navigate without using the search bar, the button works as expected. Question Why is the popToRoot() function failing after a search operation, and how can I ensure that I can return to the root view after filtering the list? Any insights or suggestions would be greatly appreciated!
4
1
387
Sep ’24
Lose my variables when my watch turn off
Hello guys, I have such a big coding problem since a half year now about data saving. I have a fitness app where we can add our exercices depend of the muscle, so you can choose it and then select your weight and number of repetitions and valid your exercise. But when I do my exercises and my watch screen is also turn off, my muscle and muscleExercise variables are going back to their default value. Here some code for you : @EnvironmentObject var dataManager: DataManager @Environment(\.modelContext) private var context @AppStorage("savedGroupName") private var savedGroupName: String = "" @AppStorage("savedExerciceName") private var savedExerciceName: String = "" @State var groupName: String = "À choisir" @State var ExerciceChoose: String = "À choisir" I use my variables here : HStack { Text("Muscle:") Spacer() NavigationLink(destination: MusclesView()) { Text(savedGroupName.isEmpty ? "À choisir" : savedGroupName) } .buttonStyle(PlainButtonStyle()) } .onAppear { savedGroupName = groupName } HStack { Text("Exercise:") Spacer() NavigationLink(destination: MuscleExercicesView(groupName: groupName, ExerciceChoose: ExerciceChoose)) { Text(savedExerciceName.isEmpty ? "À choisir" : savedExerciceName) } .onAppear { savedExerciceName = ExerciceChoose } .buttonStyle(PlainButtonStyle()) } The value of my muscle variable is taking in an other view : struct MusclesView: View { let muscleGroup = ExerciceData.muscleGroups var body: some View { NavigationStack { List(muscleGroup, id: \.name) { group in NavigationLink(destination: MuscleExercicesView(groupName: group.name, ExerciceChoose: "À choisir")) { Text(group.name) } } } } } #Preview { MusclesView() } and the value of the exerciseMuscle variable is also taking in an other view : ```import SwiftUI struct MuscleExercicesView: View { let exerciceGroup = ExerciceData.muscleGroups @State var groupName: String @State var ExerciceChoose: String var body: some View { if let group = ExerciceData.muscleGroups.first(where: { $0.name == groupName }) { List(group.exercices, id: \.id) { exercice in NavigationLink(exercice.name, destination: CurrentInformationsView(groupName: groupName, ExerciceChoose: exercice.name)) } /*.onTapGesture { print("Selected exercise: \(ExerciceChoose) for muscle group: \(groupName)") }*/ .navigationTitle(Text("Exercices pour \(groupName)")) } else { Text("Aucun exercice trouvé pour \(groupName)") .navigationTitle(Text("Erreur")) } } } #Preview { MuscleExercicesView(groupName: "Pectoraux", ExerciceChoose: "À choisir") } I tried many things (like userDefault, put my values in an array to save it etc..) to keep my variables with the same value during the session but nothing works. I wish I could have some help from you guys. Have a good day ! Cyrille
0
0
156
3w
SwiftUI - Horizontal Scroll not Working with NSTextView in NSViewRepresentable
Hello, I have an NSViewRepresentable displaying an NSTextView in SwiftUI. GeometryReader() { geometry in ScrollView([.vertical, .horizontal]) { Representable() // -18 for vertical scroller .frame(minWidth: geometry.size.width - 18) } } When I use the vertical scrollbar the mouse click is passed to the Representable and is not registered by the Scroll bar. In the image you can see I tried to use the scroll bar and it highlighted some text instead. There is a suggestion on stackoverflow to use an overlay. This fixes the scrolling issue, but will then make the Representable uninteractable. How can I use the horizontal scroll bar here as expected?
1
0
189
3w
Problem with ScrollView
Hi guys, I have a really odd problem. Whenever I try to add a vertical ScrollView, VStack or a LazyVStack to this code everything disappears. Anyone have an idea why this is happening and how to fix it? No errors show up in my code. GeometryReader{ geometry in VStack(alignment: .center, spacing: 100){ ScrollView(.horizontal, showsIndicators: false){ HStack(spacing: 250){ CardView1( showOnlyImage: false, imagename1: "TheMiceGalaxiesHubble", heading1: "The Mice Galaxies", description1: "Located in the constellation Coma Berenices." ) .scaleEffect(getScale(proxy: geometry)) .animation(.easeOut(duration: 0.3), value: getScale(proxy: geometry)) CardView1( showOnlyImage: false, imagename1: "TheMiceGalaxiesHubble", heading1: "The Mice Galaxies", description1: "Located in the constellation Coma Berenices." ) .scaleEffect(getScale(proxy: geometry)) .animation(.easeOut(duration: 0.3), value: getScale(proxy: geometry)) } } .frame(height: -200) ScrollView(.horizontal, showsIndicators: false){ HStack(spacing: 250){ CardView1( showOnlyImage: false, imagename1: "TheMiceGalaxiesHubble", heading1: "The Mice Galaxies", description1: "Located in the constellation Coma Berenices." ) .scaleEffect(getScale(proxy: geometry)) .animation(.easeOut(duration: 0.3), value: getScale(proxy: geometry)) } } } } } .contentMargins(50, for: .scrollContent) .scrollTargetBehavior(.viewAligned) .scrollTargetLayout() .padding(.horizontal, 10) .padding(.top, -35) .padding(.bottom, 50) } } } } }
0
0
126
3w
SwiftUI ScrollView performance in macOS 15
There seems to be a performance issue when scrolling using the track pad with SwiftUI scroll views in macOS 15. This issue is NOT present in macOS 14. When using the track pad the scrolling is not smooth, but "stutters". However scrolling using the scroll bars is very smooth. The "stuttering" is worse if the SwiftUI ScrollView is in the detail view of a NavigationSplitView. The problem is not noticeable in scroll views with a small number views, but when the more views inside the scroll view, the more prominent the problem becomes. I have a simple example app that illustrates the problem here (the example app is a simplification of my app Yammixer): https://github.com/danwaltin/SwiftUIScrollViewPerformance When running this example app on macOS 14 (Sonoma) on an Intel i7 Mac book pro from 2019 the scrolling is "buttery smooth". But on macOS 15 (Sequoia) on my Apple Silicon M1 Mac book pro the issue is very obvious. When using Instruments I see that on macOS 15 "flame graph" shows that 85% of the execution time is in a "_hitTestForEvent" method. If the test app does not use NavigationSplitView about 70% of execution time is in the _hitTestForEvent method.
9
8
557
Sep ’24
PersonNameComponents TextField Not Responding As Expected on macOS
Using this adapted code snippet from the Apple Developer Documentation, struct ContentView: View { @State var nameComponents = PersonNameComponents() var body: some View { Form { TextField( "Proper name", value: $nameComponents, format: .name(style: .medium) ) .onSubmit { } .disableAutocorrection(true) .border(.secondary) Text(nameComponents.debugDescription) } } } It runs and works as expected on my iOS device. When I use this same code in my macOS app, it has unexpected results. The validation mechanism (likely caused by format: .name(style: .medium) in order to bind the TextField to a PersonNameComponents instance, will not let me add spaces or delete all the text in the TextField. I have to write the first name in this format: "FirstLast" and then add a space in between the t and L. Are there any ways I can fix this on macOS while still binding my TextField to a PersonNameComponents instance?
0
0
148
3w
CPU use increases over time with simple animation
I created a simple animation of a circle that changes sizes. The circle pulses like a heartbeat in the center of the screen. My expectation was for the CPU use to be very low, but that is not the case. In addition, even if the CPU use isn't as low as I would expect, I did not expect the CPU use to increase over time because nothing else is happening in the app. Here is the code: import SwiftUI @main struct TestApp: App { var body: some Scene { WindowGroup { SplashScreenView() } } } import SwiftUI struct SplashScreenView: View { var body: some View { ZStack { SplashNucleusView(minSize: 50, maxSize: 100) } } } import SwiftUI struct SplashNucleusView: View { let minSize: Double let maxSize: Double @State private var nucleusColor: Color = .primary @State private var nucleusRadius: Double = 10 @State private var nucleusOpacity: Double = 1.0 private var nucleusAnimation: Animation { .easeInOut(duration: 0.25) .repeatForever(autoreverses: true) } let timer = Timer.publish(every: 0.5, on: .main, in: .common).autoconnect() var body: some View { Circle() .fill(nucleusColor) .frame(width: nucleusRadius) .opacity(nucleusOpacity) .onReceive(timer) { _ in withAnimation(nucleusAnimation) { nucleusRadius = Double.random(in: minSize...maxSize) } } } } This is how the animation looks: The animation is snappy until the CPU use reaches 95%, at which point there is visible stuttering. Here is how the CPU looks when the animation duration value is 0.5 seconds and the timer publishing interval is 3 seconds: Changing the animation duration value to 0.25 seconds and the timer publishing interval to 0.5 seconds changes the CPU use as follows: The complete view has many other moving parts, which make the issue much worse. The issue is evident with only the circle view. I spent hours working with the debugger, reading about animations, and testing new approaches, but the result is always the same. Why is this happening?
2
0
206
3w
Drag and Drop operations fail when executed from within the same List
I am working on creating a file viewer to browse a network directory as a way to introduce myself to iOS app development, and was trying to implement a feature that would allow users to drag and drop both files and folders onto another folder inside of the app to move items around. However, it seems that if the View that is set to draggable, and then the view that is set as the Drop Destination is in the same List, then the Drop Destination will not detect when the draggable view has been dropped onto it. Here is the structure of my code: List { Section(header: Text("Folders")) { ForEach($folders, id: \.id) { $folder in FolderCardView() .onDrop(of: [UTType.item], isTargeted: $fileDropTargeted, perform: { (folders, cgPoint) -> Bool in print("Dropped") return true }) } } Section(header: Text("Files")) { ForEach($files, id: \.id) { $file in FileCardView() .onDrag({ let folderProvider = NSItemProvider(object: file) return folderProvider }) } } } I have verified that the issue comes down to the list, because if I move both of the ForEach loops out on their own, or even into their own respective lists, the code works perfectly. I have not only tested this with the older .onDrop and .onDrag modifiers as shown above, but also the newer .draggable and .dropDestination modifiers, and the result is the same. Does anyone know if this is intended behavior? I really like the default styling that the List element applies to other elements within, so I am hoping that it might just be a bug or an oversight. Thanks!
3
0
701
Jul ’23
Text right-to-left direction with mathematical text
Hi, I am writing a calculator app in Swift 5 and decided to support eastern asian numerals to make it a bit interesting. The numeric display itself works well in Arabic langauge setting, but I have a protocol view that reports the entered data and results. I do it in a Grid with two Text items, one for the input and one for the result. The result contains a numeric string in U0660... arabic numerals, and that looks fine. The input is a construct looking like Text(number1) + Text(" ") + Text(operation), so it goes into a single Grid cell. The standard version looks like this: but the arabic version shows the numbers and operation symbols in the wrong sequence: I guess that has something to do with the mathematical symbols such as + and = simply register as ltr Text and confuse the text layout. If I localize π, the result looks different: So my question would be: How do I force a fragment such as Text(" +") to go in rtl direction? Is this a SwiftUI topic or doesit go deeper? I am looking at the Text element now, but may be that is the wrong approach.
6
0
167
3w
Is it intended for onchange to work with let properties?
Hi all, by chance, we introduced code similar to the following in the body of one of our views: struct MyView: View { let myInt: Int var body: some View { EmptyView() // Empty body .onChange(of: myInt) { newValue in … } } } Notice that a simple let of type Int is used here, rather than State or something similar. While it works and onChange is actually triggered when views are rebuilt, I’d like to clarify a few things: Is this behavior actually expected and reliable, or is it a gray area and can be changed in the future? If it is expected, can this be made clearer in the documentation? If it is a gray area, can the documentation be improved to address it? Thanks!
1
1
150
4w
onDrag "lagging" issue in iOS 18
I've seen an earlier post on this with no response. Has anyone else gotten a response from Apple or have run across a solution to onDrag lagging when released to drop on iOS 18? I've been chasing this for a week thinking it was me and then I woke up and started testing it on older iOS versions and the issue goes away. I happens on simulators and real phones. A little more digging and I'm seeing occasional chatter about this .5 to 1 second delay. Here's a code example that reproduces it: import SwiftUI import UniformTypeIdentifiers struct ContentView: View { @State private var draggableText: String = "Move this" var body: some View { VStack(spacing: 80) { DraggableItem(content: $draggableText) DropZone { Text("Place Here!") .font(.headline) .foregroundColor(.white) } .frame(width: 150, height: 150) .background(Color.green) .cornerRadius(12) } .padding() } } struct DraggableItem: View { @Binding var content: String var body: some View { Text(content) .frame(width: 120, height: 120) .background(Color.red) .foregroundColor(.white) .cornerRadius(8) .onDrag { NSItemProvider(object: NSString(string: content)) } } } struct DropZone<Content: View>: View { var content: () -> Content var body: some View { ZStack { content() } .onDrop(of: [UTType.text], delegate: DropHandler()) } } struct DropHandler: DropDelegate { func performDrop(info: DropInfo) -> Bool { // Add logic to handle the drop print("Item dropped!") return true } } #Preview { ContentView() }
4
2
254
Oct ’24
iOS18 SwiftUI Bug: Theme Change Issue
Yet another bug, I suppose, on iOS 18. This time it relates to the SwiftUI framework, and to be precise, it's about the theme change functionality. It no longer works properly on iOS 18, while it’s not an issue on iOS 17. Demo app available at: https://github.com/m4rqs/iOS18ThemeIssue Steps to reproduce: Assume the system is set to use the light theme. Go to the Settings tab. Switch the colour scheme to Dark. Switch the colour scheme to System (this no longer works). Switch the colour scheme to Light (the tab bar is not updated if the content page is long enough and go beyond current view). Switch between tabs (tab bar icons are greyed) enum Theme: Int { case system case light case dark } struct SettingsView: View { @State private var theme: Theme = .system @State private var colorScheme: ColorScheme? = nil var body: some View { Form { Section(header: Text("General")) { Picker("Colour Scheme", selection: $theme) { Text("System").tag(Theme.system) Text("Light").tag(Theme.light) Text("Dark").tag(Theme.dark) } .preferredColorScheme(colorScheme) .onChange(of: theme) { switch theme { case .light: colorScheme = .light case .dark: colorScheme = .dark default: colorScheme = nil } } } } } }
3
4
497
Sep ’24
Live Activity compact timers
The Human Interface Guidelines for Live Activities provide several examples of compact presentations that have a timer counting down formatted like "3min" or "3m", similar to the timers in the Clock app. Such examples can be found in this Stack Overflow question: https://stackoverflow.com/questions/77551496/is-it-possible-to-make-an-only-minutes-1m-countdown-in-a-live-activity A Timer initialized with init(timerInterval:pauseTime:countsDown:showsHours:) has provided a live countdown timer in widgets and live activities, but the formatting is limited. And since live activities come with limitations that prevent us from using Timers, there's no real way to implement this kind of thing ourselves. What is Apple's official guidance for implementing this kind of timer for the compact presentation?
4
2
1k
Jun ’24
How to create a custom TimeDataSource?
Hello. I am working with the iOS 18b8 and Xcode 16b6 betas, updating a Live Activity Widget to adopt the new FormatStyle variants of the SwiftUI Text views. We used to use: Text(workoutStartDate, style: .relative) and it seems with iOS 18 we can replace it with: Text(workoutStartDate, format: .relative(presentation: .numeric, unitsStyle: .wide)) The former code would auto-increment, allowing a user to look at their Live Activity and see the duration of their workout so far ticking by. The new code does provide a nice relative duration string, but it doesn't auto-increment in the Live Activity's View – I need that functionality. I also updated other Texts in the Live Activity's View to adopt the .timer and .stopwatch FormatStyles. Those auto-increment and update no problem – once I realized I needed to provide a TimeDataSource<Date>.currentDate and not a simple Date. But in this .relative case, there is no auto-incrementing, and I'm guessing it may be due to providing a Date (workoutStartDate) and not a TimeDataSource<Date> as TimeDataSource seems to be the magic to make the Text auto-increment (or it's possible this format simply doesn't support auto-increment? bummer if so since the prior way did). How can I have a TimeDataSource<Date> that vends my arbitrary date (workoutStartDate)? I dug around, didn't find anything, but I wouldn't be surprised if I was overlooking something. PS: I have tried other approaches to solve this, such as simply using a .timer or .stopwatch format. That would change the under experience under iOS 18, and we think degrade it (the relative textual representation is nicer and provides distinction from the .timer also in the same View). We could keep the former approach, despite the minor layout issues under iOS 18. I have considered additional approaches as well – and am totally open to more! Here tho, I am truly curious how one might provide a custom TimeDataSource anchored at a date we provide (perhaps dynamically). Thank you.
1
1
300
Sep ’24
onTapGesture in Menu or not working
Hi, after update to Swift6 and iOS 18 my code is not working anymore. This is code from documentation with onTapGesture (instead of primaryAction) and it's not working. OnTapGesture is not starting when user click. Menu { Button(action: {}) { Label("Add to Reading List", systemImage: "eyeglasses") } Button(action: {}) { Label("Add Bookmarks for All Tabs", systemImage: "book") } Button(action: {}) { Label("Show All Bookmarks", systemImage: "books.vertical") } } label: { Label("Add Bookmark", systemImage: "book") } onTapGesture: { print(" Print on tap gesture") } primaryAction isn't working either. I mean, primary action works but menu is not showing inside buttons. Menu { Button(action: {}) { Label("Add to Reading List", systemImage: "eyeglasses") } Button(action: {}) { Label("Add Bookmarks for All Tabs", systemImage: "book") } Button(action: {}) { Label("Show All Bookmarks", systemImage: "books.vertical") } } label: { Label("Add Bookmark", systemImage: "book") } primaryAction: { print("") } I also tried to overlay the menu, no effect. ZStack { Menu { Button(action: {}) { Label("Add to Reading List", systemImage: "eyeglasses") } Button(action: {}) { Label("Add Bookmarks for All Tabs", systemImage: "book") } Button(action: {}) { Label("Show All Bookmarks", systemImage: "books.vertical") } } label: { Label("Add Bookmark", systemImage: "book") } Color.clear .contentShape(Rectangle()) .onTapGesture { print("Tap gesture recognized") } } Please help. How to start action when user is clicking on menu?
6
5
796
Sep ’24
Auxiliary window control in Mac SwiftUI & SwiftData app
I've got a Mac Document App using SwiftUI and SwiftData. All is working well with the models editing, etc. There's a feature I need to implement, and can't seem to make it work. From the main window of the app, I need to be able to launch an auxilliary window containing a view-only representation of the model being edited. The required workflow is something like this: Open a document (SwiftData) Select a sub-model of the document Launch the aux window to display the view of the model data (must be in a separate window, because it will be on a different physical display) Continue making edits to the sub-model, as they are reflected in the other window So, below is the closest I've been able to come, and it's still not working at all. What happens with this code: Click on the "Present" button, the encounter-presentation Window opens, but never loads the data model or the view. It's just an empty window. This is the spot in the main view where the auxiliary window will be launched: @State var presenting: Presentation? = nil var presentingThisEncounter: Bool { presenting?.encounter.id == encounter.id } @Environment(\.openWindow) var openWindow ... if presentingThisEncounter { Button(action: { presenting = nil }) { Label("Stop", systemImage: "stop.fill") .padding(.horizontal, 4) } .preference(key: PresentationPreferenceKey.self, value: presenting) } else { Button(action: { presenting = Presentation(encounter: encounter, display: activeDisplay) openWindow(id: "encounter-presentation") }) { Label("Present", systemImage: "play.fill") .padding(.horizontal, 4) } .preference(key: PresentationPreferenceKey.self, value: nil) } Presentation is declared as: class Presentation: Observable, Equatable { Here's the contents of the App, where the DocumentGroup & model is instantiated, and the aux window is managed: @State var presentation: Presentation? var body: some Scene { DocumentGroup(editing: .encounterList, migrationPlan: EncounterListMigrationPlan.self) { ContentView() .onPreferenceChange(PresentationPreferenceKey.self) { self.presentation = $0 } } Window("Presentation", id: "encounter-presentation") { VStack { if let presentation = presentation { PresentingView(presentation: presentation) } } } } And the definition of PresentationPreferenceKey: struct PresentationPreferenceKey: PreferenceKey { static var defaultValue: Presentation? static func reduce(value: inout Presentation?, nextValue: () -> Presentation?) { value = nextValue() } }
2
0
236
Sep ’24