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

NavigationSplitView, tvOS, and view focus
Hello, I have a SwiftUI application that uses NavigationSplitView. It's working great on iOS, iPad, and macOS. I decided to give it a try on tvOS. After it builds, it will not allow user interaction on the NavigationSplitView's sidebar. I've tried various view focus modifiers without any success. I'd also expect this to "just work" as default behavior. I have filed FB13447961 on this issue. Here is a distillation of the code that demonstrates the problem. Any ideas? Thank you. enum Category : String, CaseIterable { case first case second case third } enum Detail : String, CaseIterable { case one case two case three } struct DetailView : View { let category : Category? var body: some View { if let category { Text(category.rawValue) List(Detail.allCases, id: \.self) { detail in NavigationLink(value: detail) { Text(detail.rawValue) } } } else { Text("Select Category") } } } struct ContentView: View { // NOTE: If this category is set to something, it will show that category's detail. // The problem is that the NavigationSplitView sidebar does not have, nor does not // seem to be able to get focus. @State var category: Category? @State var path : [Detail] = [] var body: some View { NavigationSplitView { List(Category.allCases, id: \.self, selection: $category) { category in Text(category.rawValue) } } detail: { NavigationStack(path: $path) { DetailView(category: category) .navigationDestination(for: Detail.self) { detail in Text("\(detail.rawValue)") } } } } } #wwdc2023-10162 #wwdc20-10042
1
0
849
Dec ’23
SwiftUI creating MapCameraPosition from CLLocationManager initialiser/self error when trying to tie them? (see code)
Trying to use new Swift @Observable to monitor GPS position within SwiftUI content view. But how do I tie the latest locations to the SwiftUI Map's mapCameraPosition? Well ideally the answer could cover: How to fix this error - So get map tracking along with the User Position, but also How to include facility to turn on/off the map moving to track the user position (which I'll need to do next). So could be tracking, then disable, move map around and have a look at things, then click button to start syncing the mapcameraposition to the GPS location again Refer to error I'm embedded in the code below. import SwiftUI import MapKit @Observable final class NewLocationManager : NSObject, CLLocationManagerDelegate { var location: CLLocation? = nil private let locationManager = CLLocationManager() func startCurrentLocationUpdates() async throws { if locationManager.authorizationStatus == .notDetermined { locationManager.requestWhenInUseAuthorization() } for try await locationUpdate in CLLocationUpdate.liveUpdates() { guard let location = locationUpdate.location else { return } self.location = location } } } struct ContentView: View { var newlocationManager = NewLocationManager() @State private var cameraPosition: MapCameraPosition = .region(MKCoordinateRegion( center: newlocationManager.location?.coordinate ?? <#default value#>, span: MKCoordinateSpan(latitudeDelta: 0.25, longitudeDelta: 0.25) )) // GET ERROR: Cannot use instance member 'newlocationManager' within property initializer; property initializers run before 'self' is available var body: some View { ZStack { Map(position: $cameraPosition) Text("New location manager: \(newlocationManager.location?.description ?? "NIL" )") // works } .task { try? await newlocationManager.startCurrentLocationUpdates() } } } #Preview { ContentView() }
2
0
1.5k
Jan ’24
matchedGeometryEffect flickers in a TabView
I tried building the View from this section, but when there is a List on the second tab, the animation performed by the matchedGeometryEffect does not work as intended. This video shows how the transition works with Text("Second Tab") as the second tab. Everything looks fine. But when I replace the Text with a List, the transition flickers and does not look smooth anymore. List { Text("The Scarlet Letter") Text("Moby-Dick") Text("Little Women") Text("Adventures of ") } Here is the code for the app. import SwiftUI @main struct MyWatchApp: App { @Namespace var library @State var pageNumber = 0 private let bookIcon = "bookIcon" var body: some Scene { WindowGroup { NavigationStack { TabView(selection: $pageNumber) { VStack { Image(systemName: "books.vertical.fill") .imageScale(.large) .matchedGeometryEffect( id: bookIcon, in: library, properties: .frame, isSource: pageNumber == 0) Text("Books") } .tag(0) Text("Second Tab").tag(1) } .tabViewStyle(.verticalPage) .toolbar { ToolbarItem(placement: .topBarLeading) { Image(systemName: "books.vertical.fill") .matchedGeometryEffect( id: bookIcon, in: library, properties: .frame, isSource: pageNumber != 0) } } } } } }
1
2
940
Jan ’24
SwiftUI TextEditor on Mac, spell check weirdness
I think I'm misunderstanding something here, maybe someone could point me in the right direction. In System Settings, "Correct spelling automatically" is DISABLED, along with all the other options that ruin what you're typing. In TextEdit, it continues to highlight spelling and grammar mistakes, so does Mail, Safari and others. Yet SwiftUI made apps, don't. I can right-click, enable "Check Spelling while typing", but after typing a few characters, words, it becomes disabled again. I've busted through the view hierarchy to get the hosted NSTextView and overridden "isContinuousSpellCheckingEnabled" but something frequently reverts this to false. Is my only option to have a large TextEditor with spell checking (but not auto correction) to create my own version of TextEditor by hosting the NSTextView myself. That's a lot of work for something which seems wrong, when I'm hoping that I'm simply missing something here. Xcode 15.2 on macOS 13.5.
1
1
690
Jan ’24
Unwanted "More" button in tabView when selected tab is in 5th position and beyond
Hello SwiftUI devs, I would like to remove the "More" button that appears in the top left of the screen whenever the selected tab of a tab view is in 5th position and beyond. It ruins the layout. struct ContentView: View { private let tabs = (1...10).map { "\($0)" } @State private var selectedTab: String = "5" var body: some View { TabView(selection: $selectedTab) { ForEach(tabs, id: \.self) { tab in Text("Tab \(tab)") .tabItem { Label("Tab \(tab)", systemImage: "star") } .toolbar(.hidden, for: .tabBar) } } } } At first glance, one easy fix would be to rearrange the tabs list in the ForEach loop, putting the selected tab at the first position. This does the trick BUT we lose the states of the views, which is out of the question in my use-case. Getting rid of the tab view and handling the logic with a simple Switch paired with a state restoration mechanism using SceneStorage or SwiftData is probably possible but sounds like a white elephant compared to finding a solution to remove that "More" button. Thank you
1
1
589
Jan ’24
SwiftUi Picker in WatchOS throws Scrollview Error when using Digital Crown
The following WatchOs App example is very short, but already not functioning as it is expected, when using Digital Crown (full code): import SwiftUI struct ContentView: View { let array = ["One","Two","Three","Four"] @State var selection = "One" var body: some View { Picker("Array", selection: $selection) { ForEach(array, id: \.self) { Text($0) } } } } The following 2 errors are thrown, when using Digital Crown for scrolling: ScrollView contentOffset binding has been read; this will cause grossly inefficient view performance as the ScrollView's content will be updated whenever its contentOffset changes. Read the contentOffset binding in a view that is not parented between the creator of the binding and the ScrollView to avoid this. Error: Error Domain=NSOSStatusErrorDomain Code=-536870187 "(null)" Any help appreciated. Thanks a lot.
6
5
1.1k
Jan ’24
SwiftUI Sheet race condition
Hi! While working on my Swift Student Challenge submission it seems that I found a race condition (TOCTOU) bug in SwiftUI when using sheets, and I'm not sure if this is expected behaviour or not. Here's an example code: import SwiftUI struct ContentView: View { @State var myVar: Int? @State private var presentSheet: Bool = false var body: some View { VStack { // Uncommenting the following Text() view will "fix" the bug (kind of, see a better workaround below). // Text("The value is \(myVar == nil ? "nil" : "not nil")") Button { myVar = nil } label: { Text("Set value to nil.") } Button { myVar = 1 presentSheet.toggle() } label: { Text("Set value to 1 and open sheet.") } } .sheet(isPresented: $presentSheet, content: { if myVar == nil { Text("The value is nil") .onAppear { print(myVar) // prints Optional(1) } } else { Text("The value is not nil") } }) } } When opening the app and pressing the open sheet button, the sheet shows "The value is nil", even though the button sets myVar to 1 before the presentSheet Bool is toggled. Thankfully, as a workaround to this bug, I found out you can change the sheet's view to this: .sheet(isPresented: $presentSheet, content: { if myVar == nil { Text("The value is nil") .onAppear { if myVar != nil { print("Resetting View (TOCTOU found)") let mySwap = myVar myVar = nil myVar = mySwap } } } else { Text("The value is not nil") } }) This triggers a view refresh by setting the variable to nil and then to its non-nil value again if the TOCTOU is found. Do you think this is expected behaivor? Should I report a bug for this? This bug also affects .fullScreenCover() and .popover().
5
0
1.7k
Feb ’24
Swift unable to find sound file
Hi everyone, I'm currently facing an issue with AVAudioPlayer in my SwiftUI project. Despite ensuring that the sound file "buttonsound.mp3" is properly added to the project's resources (I dragged and dropped it into Xcode), the application is still unable to locate the file when attempting to play it. Here's the simplified version of the code I'm using: import SwiftUI import AVFoundation struct ContentView: View { var body: some View { VStack { Button("Play sound") { playSound(named: "buttonsound", ofType: "mp3") } } } } func playSound(named name: String, ofType type: String) { guard let soundURL = Bundle.main.url(forResource: name, withExtension: type) else { print("Sound file not found") return } do { let audioPlayer = try AVAudioPlayer(contentsOf: soundURL) audioPlayer.prepareToPlay() audioPlayer.play() } catch let error { print("Error playing sound: \(error.localizedDescription)") } }
8
0
2.6k
Feb ’24
TextEditor with a fixedSize and scroll disabled is completely broken
I am trying to build a text editor that shrinks to its content size. The closest I have been able to get has been to add the .scrollDisabled(true) and .fixedSize(horizontal: false, vertical: true) modifiers. This almost achieves what I need. There are two problems though: long single line text gets cut off at the end creating line breaks causes the text editor to grow vertically as expected (uncovering the cut off text in point 1 above). However, when you delete the line breaks, the TextEditor does not shrink again. I have had a radar open for some time: FB13292506. Hopefully opening a thread here will get more visibility. And here is some sample code to easily reproduce the issue: import SwiftUI struct ContentView: View { @State var text = "[This is some long text that will be cut off at the end of the text editor]" var body: some View { TextEditor(text: $text) .scrollDisabled(true) .fixedSize(horizontal: false, vertical: true) } } #Preview { ContentView() } Here is a gif of the behavior:
2
2
1.4k
Feb ’24
Xcode 15 console logging of system messages
Background I have a SwiftUI app that uses OSLog and the new Logger framework. In my SwiftUI views, I would like to use something like Self._logChanges() to help debug issues. After some trial and error, I can see the messages appear in the System console log for the app I am debugging using the com.apple.SwiftUI subsystem. Problem I'd like to see those same messages directly in Xcode's console window so I can filter them as needed. How do I do that? Thanks! -Patrick
4
1
2.3k
Feb ’24
Does some restriction exist in SwiftUI for binding computed values?
I have a view, and in this view I bind Axis class values — lowerBound which is a regular property and at – computed one which comes from protocol HasPositionProtocol associated with Axis. struct AxisPropertiesView<Axis>: View where Axis: StyledAxisProtocol, Axis: HasPositionProtocol, Axis: Observable { @Bindable var axis: Axis var body: some View { HStack { TextField("", text: $axis.shortName) .frame(width: 40) TextField("", value: $axis.lowerBound, format: .number) .frame(width: 45) //Problem is here: Slider(value: $axis.at, in: axis.bounds) ... Unfortunately I got en error Failed to produce diagnostic for expression; ... for whole View. But if I remove Slider from View, error disappeared. What could cause this strange behaviour? Value of .at comes from: public extension HasPositionProtocol { ///Absolut position on Axis var at: Double { get { switch position { case .max: return bounds.upperBound case .min: return bounds.lowerBound case .number(let number): return number } } set { switch newValue { case bounds.lowerBound: position = .min case bounds.upperBound: position = .max default: position = .number(newValue) } } } }
1
0
385
Feb ’24
Keyboard will not show when setting focus on a SwiftUI text field from a button in an ornament on visionOS
Using a button that is placed in the bottom ornament to set focus on a text field will not display the keyboard properly while a button embedded in the view will behave as expected. To demonstrate the issue, simply run the attached project on Vision Pro with visionOS 1.1 and tap the Toggle 2 button in the bottom ornament. You’ll see that the field does have focus but the keyboard is now visible. Run the same test with Toggle 1 and the field will get focus and the keyboard will show as expected. import SwiftUI import RealityKit import RealityKitContent struct ContentView: View { @State private var text = "" @State private var showKeyboard = false @FocusState private var focusedField: FocusField? private enum FocusField: Hashable { case username case password } var body: some View { VStack { TextField("Test", text: $text) .focused($focusedField, equals: .username) Text("Entered Text: \(text)") .padding() Button("Toggle 1") { // This button will work and show the keyboard if focusedField != nil { focusedField = nil } else { focusedField = .username } } Spacer() } .padding() .toolbar { ToolbarItem(placement: .bottomOrnament) { Button("Toggle 2") { // This button will set focus properly but not show the keyboard if focusedField != nil { focusedField = nil } else { focusedField = .username } } } } } } Is there a way to work around this? FB13641609
1
0
724
Feb ’24
StoreKit's manageSubscriptionsSheet view modifier not loading
Our app was just rejected by Apple because they say the subscription management sheet never loads. It just spins indefinitely. We're using StoreKit's manageSubscriptionsSheet view modifier to present the sheet, and it's always worked for us when testing in SandBox. Has anyone else had this problem? Given that it's Apple's own code that got us rejected, what's our path forward?
10
5
1.3k
Feb ’24
SubscriptionStoreView showing 'The subscription is unavailable in the current storefront.' in production (StoreKit2)
I Implement a 'SubscriptionStoreView' using 'groupID' into a project (iOS is targeting 17.2 and macOS is targeting 14.1).Build/run the application locally (both production and development environments will work fine), however once the application is live on the AppStore in AppStoreConnect, SubscriptionStoreView no longer shows products and only shows 'Subscription Unavailable' and 'The subscription is unavailable in the current storefront.' - this message is shown live in production for both iOS and macOS targets. There is no log messages shown in the Console that indicate anything going wrong with StoreKit 2, but I haven't made any changes to my code and noticed this first start appearing about 5 days ago. I expect the subscription store to be visible to all users and for my products to display. My application is live on both the iOS and macOS AppStores, it passed App Review and I have users who have previously been able to subscribe and use my application, I have not pushed any new changes, so something has changed in StoreKit2 which is causing unexpected behaviour and for this error message to display. As 'SubscriptionStoreView' is a view provided by Apple, I'm really not sure on the pathway forward other than going back to StoreKit1 which I really don't want to do. Is there any further error information that can be provided on what might be causing this and how I can fix it? (I have created a feedback ticket FB13658521)
4
2
1.7k
Feb ’24
SignInWithApple / AuthenticationServices fails SwiftUI
Xcode 15.2, iOS 17.2 I have a piece of code that displays videos. It has been working for at least 6 months. Suddenly only the first video played. The following videos would only play audio with the video being frozen at the first frame. I noticed that SwiftUI would start to instantiate multiple instances of my player observable class instead of just one. After chasing the problem for most of a day I found that if I completely removed every piece of code referencing AuthenticationServices then everything would work fine again. Even if I add the following piece of code which is not used or called in any way. Then SwiftUI will start to act weird. func configure(_ request: ASAuthorizationAppleIDRequest) { request.requestedScopes = [.fullName, .email] } If I comment out request.requestedScopes = [.fullName, .email] everything works fine. The SignInWithApple is configured and works fine if I enable the code. Any suggestions on how to solve or any work arounds would be highly appreciated.
1
0
937
Feb ’24
TabView and Swift Charts giving inconsistent behaviour when swiping between pages
Hi there, I have a TabView in page style. Inside that TabView I have a number of views, each view is populated with a model object from an array. The array is iterated to provide the chart data. Here is the code: TabView(selection: $displayedChartIndex) { ForEach((0..<data.count), id: \.self) { index in ZStack { AccuracyLineView(graphData: tabSelectorModel.lineChartModels[index]) .padding(5) } .tag((index)) } } .tabViewStyle(.page) .indexViewStyle(.page(backgroundDisplayMode: .always)) I am seeing odd behaviour, as I swipe left and right, occasionally the chart area shows the chart from another page in the TabView. I know the correct view is being shown as there are text elements. See the screenshot below. The screen on the right is running iOS 17.2 and this works correctly. The screen on the left is running iOS 17.4 and the date at the top is correct which tells me that the data object is correct. However the graph is showing a chart from a different page. When I click on the chart on the left (I have interaction enabled) then it immediately draws the correct chart. If I disable the interaction then I still get the behaviour albeit the chart never corrects itself because there is no interaction! I can reproduce this in the 17.4 simulator and it is happening in my live app on iOS17.4. This has only started happening since iOS 17.4 dropped and works perfectly in iOS 17.2 simulator and I didn't notice it in the live app when I was running 17.3. Is this a bug and/or is there a workaround? For info this is the chart view code, it is not doing anything clever: struct AccuracyLineView: View { @State private var selectedIndex: Int? let graphData: LineChartModel func calcHourMarkers (maxTime: Int) -> [Int] { let secondsInDay = 86400 // 60 * 60 * 24 var marks: [Int] = [] var counter = 0 while counter <= maxTime { if (counter > 0) { marks.append(counter) } counter += secondsInDay } return marks } var selectedGraphMark: GraphMark? { var returnMark: GraphMark? = nil var prevPoint = graphData.points.first for point in graphData.points { if let prevPoint { if let selectedIndex, let lastPoint = graphData.points.last, ((point.interval + prevPoint.interval) / 2 > selectedIndex || point == lastPoint) { if point == graphData.points.last { if selectedIndex > (point.interval + prevPoint.interval) / 2 { returnMark = point } else { returnMark = prevPoint } } else { returnMark = prevPoint break } } } prevPoint = point } return returnMark } var body: some View { let lineColour:Color = Color(AppTheme.globalAccentColour) VStack { HStack { Image(systemName: "clock") Text(graphData.getStartDate() + " - " + graphData.getEndDate()) // 19-29 Sept .font(.caption) .fontWeight(.light) Spacer() } Spacer() Chart { // Lines ForEach(graphData.points) { item in LineMark( x: .value("Interval", item.interval), y: .value("Offset", item.timeOffset), series: .value("A", "A") ) .interpolationMethod(.catmullRom) .foregroundStyle(lineColour) .symbol { Circle() .stroke(Color(Color(UIColor.secondarySystemGroupedBackground)), lineWidth: 4) .fill(AppTheme.globalAccentColour) .frame(width: 10) } } ForEach(graphData.trend) { item in LineMark ( x: .value("Interval", item.interval), y: .value("Offset", item.timeOffset) ) .foregroundStyle(Color(UIColor.systemGray2)) } if let selectedGraphMark { RuleMark(x: .value("Offset", selectedGraphMark.interval)) .foregroundStyle(Color(UIColor.systemGray4)) } } .chartXSelection(value: $selectedIndex) .chartXScale(domain: [0, graphData.getMaxTime()]) } } }
10
0
1.7k
Mar ’24