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

Posts under SwiftUI tag

200 Posts

Post

Replies

Boosts

Views

Activity

scrollTargetLayout + @FetchRequest causes items to constantly re-initialize
On a ScrollView+LazyVStack, the addition of .scrollTargetLayout causes many list items to be initialized, instead of the ordinary economical behavior of LazyVStack, where only the necessary items and views are initialized. Even worse, as the stack is scrolled down, all list items are reinitialized for every small scroll. Without, .scrollTargetLayout, everything works fine. I've tried every variation of locating modifiers, and different ways of identifying the list items, with no success. Any ideas? Thanks. @FetchRequest( sortDescriptors: [NSSortDescriptor(keyPath: \Post.created, ascending: true)], animation: .default) private var posts: FetchedResults<Post> var body: some View { ZStack{ ScrollView{ LazyVStack(spacing:0) { ForEach(posts, id: \.self) { post in PostView(post: post) } .onDelete(perform: deletePosts) }.scrollTargetLayout() // <---- causes multiple Posts re-instantiations for any small scroll, very slow } .scrollPosition(id: $scrolledID) .scrollTargetBehavior(.paging)
2
1
345
Dec ’24
the ID [":"] occurs multiple times within the collection, this will give undefined results!
Hi! After upgrading to Xcode 16.1 my watchOS app is getting below error using a DatePicker configured with: displayedComponents: .hourAndMinute. I cannot find a solution for this error/warning. It only appears when im using : .hourAndMinute or : .hourAndMinuteandSeconds, but not .date. Note! My code is unchanged only change I Xcode upgrade. Any suggestions? ForEach<Array, Array, _ConditionalContent<_ConditionalContent<_ConditionalContent<_ConditionalContent<YearPicker, MonthPicker>, _ConditionalContent<DayPicker, ComponentPicker>>, _ConditionalContent<_ConditionalContent<ComponentPicker, ComponentPicker>, _ConditionalContent<AMPMPicker, ModifiedContent<Text, _PaddingLayout>>>>, EmptyView>>: the ID [":"] occurs multiple times within the collection, this will give undefined results! import SwiftUI import WidgetKit struct TimeEditView: View { let title: String @Binding var storedValue: String var body: some View { Form { DatePicker( title, selection: Binding<Date>( get: { Date.from(storedValue) ?? Date() }, set: { newDate in storedValue = newDate.toString() } ), displayedComponents: .hourAndMinute ) .onChange(of: storedValue) { WidgetCenter.shared.reloadAllTimelines() print("Morning Start changed!") } } .navigationTitle(title) } }
0
0
281
Dec ’24
SwifUI. Short way for using modifier methods
These helper methods allow to use modifier methods in standard for SwiftUI short way. extension View { @inline(__always) func modify(_ block: (_ view: Self) -> some View) -> some View { block(self) } @inline(__always) func modify<V : View, T>(_ block: (_ view: Self, _ data: T) -> V, with data: T) -> V { block(self, data) } } _ DISCUSSION Suppose you have modifier methods: func addBorder(view: some View) -> some View { view.padding().border(Color.red, width: borderWidth) } func highlight(view: some View, color: Color) -> some View { view.border(Color.red, width: borderWidth).overlay { color.opacity(0.3) } } _ Ordinar Decision Your code may be like this: var body: some View { let image = Image(systemName: "globe") let borderedImage = addBorder(view: image) let highlightedImage = highlight(view: borderedImage, color: .red) let text = Text("Some Text") let borderedText = addBorder(view: text) let highlightedText = highlight(view: borderedText, color: .yellow) VStack { highlightedImage highlightedText } } This code doesn't look like standard SwiftUI code. _ Better Decision Described above helper methods modify(:) and modify(:,with:) allow to write code in typical for SwiftUI short way: var body: some View { VStack { Image(systemName: "globe") .modify(addBorder) .modify(highlight, with: .red) Text("Some Text") .modify(addBorder) .modify(highlight, with: .yellow) } }
0
0
408
Dec ’24
Animatable AnyInsettableShape
System provides AnyShape type erasure that animates correctly. But system doesn't provide AnyInsettableShape. Here is my implementation of AnyInsettableShape (and AnyAnimatableData that is needed to support animation). Let me know if there is simpler solution. struct AnyInsettableShape: InsettableShape { private let _path: (CGRect) -> Path private let _inset: (CGFloat) -> AnyInsettableShape private let _getAnimatableData: () -> AnyAnimatableData private let _setAnimatableData: (_ data: AnyAnimatableData) -> AnyInsettableShape init<S>(_ shape: S) where S : InsettableShape { _path = { shape.path(in: $0) } _inset = { AnyInsettableShape(shape.inset(by: $0)) } _getAnimatableData = { AnyAnimatableData(shape.animatableData) } _setAnimatableData = { data in guard let otherData = data.rawValue as? S.AnimatableData else { assertionFailure(); return AnyInsettableShape(shape) } var shape = shape shape.animatableData = otherData return AnyInsettableShape(shape) } } var animatableData: AnyAnimatableData { get { _getAnimatableData() } set { self = _setAnimatableData(newValue) } } func path(in rect: CGRect) -> Path { _path(rect) } func inset(by amount: CGFloat) -> some InsettableShape { _inset(amount) } } struct AnyAnimatableData : VectorArithmetic { init<T : VectorArithmetic>(_ value: T) { self.init(optional: value) } private init<T : VectorArithmetic>(optional value: T?) { rawValue = value _scaleBy = { factor in (value != nil) ? AnyAnimatableData(value!.scaled(by: factor)) : .zero } _add = { other in AnyAnimatableData(value! + (other.rawValue as! T)) } _subtract = { other in AnyAnimatableData(value! - (other.rawValue as! T)) } _equal = { other in value! == (other.rawValue as! T) } _magnitudeSquared = { (value != nil) ? value!.magnitudeSquared : .zero } _zero = { AnyAnimatableData(T.zero) } } fileprivate let rawValue: (any VectorArithmetic)? private let _scaleBy: (_: Double) -> AnyAnimatableData private let _add: (_ other: AnyAnimatableData) -> AnyAnimatableData private let _subtract: (_ other: AnyAnimatableData) -> AnyAnimatableData private let _equal: (_ other: AnyAnimatableData) -> Bool private let _magnitudeSquared: () -> Double private let _zero: () -> AnyAnimatableData mutating func scale(by rhs: Double) { self = _scaleBy(rhs) } var magnitudeSquared: Double { _magnitudeSquared() } static let zero = AnyAnimatableData(optional: nil as Double?) @inline(__always) private var isZero: Bool { rawValue == nil } static func + (lhs: AnyAnimatableData, rhs: AnyAnimatableData) -> AnyAnimatableData { guard let (lhs, rhs) = fillZeroTypes(lhs, rhs) else { return .zero } return lhs._add(rhs) } static func - (lhs: AnyAnimatableData, rhs: AnyAnimatableData) -> AnyAnimatableData { guard let (lhs, rhs) = fillZeroTypes(lhs, rhs) else { return .zero } return lhs._subtract(rhs) } static func == (lhs: AnyAnimatableData, rhs: AnyAnimatableData) -> Bool { guard let (lhs, rhs) = fillZeroTypes(lhs, rhs) else { return true } return lhs._equal(rhs) } @inline(__always) private static func fillZeroTypes(_ lhs: AnyAnimatableData, _ rhs: AnyAnimatableData) -> (AnyAnimatableData, AnyAnimatableData)? { switch (!lhs.isZero, !rhs.isZero) { case (true, true): (lhs, rhs) case (true, false): (lhs, lhs._zero()) case (false, true): (rhs._zero(), rhs) case (false, false): nil } } }
0
0
427
Dec ’24
NavigationSplitView list selection buggy after deleting?
I'm starting with the template code from Apple from: File > New Project > macOS app using Swift UI and Swift Data. Selection works fine if only adding items, but after deleting any selected item selection stops working for some rows. It seems like the UI and model get out of sync. After restarting the app, or simply launching a new window, it works again. Is this a known bug in Swift UI and is there a workaround? import SwiftUI import SwiftData struct ContentView: View { @Environment(\.modelContext) private var modelContext @Query private var items: [Item] var body: some View { NavigationSplitView { List { ForEach(items) { item in NavigationLink { Text("Item at \(item.timestamp, format: Date.FormatStyle(date: .numeric, time: .standard))") } label: { Text(item.timestamp, format: Date.FormatStyle(date: .numeric, time: .standard)) } } .onDelete(perform: deleteItems) } .navigationSplitViewColumnWidth(min: 180, ideal: 200) .toolbar { ToolbarItem { Button(action: addItem) { Label("Add Item", systemImage: "plus") } } } } detail: { Text("Select an item") } } private func addItem() { withAnimation { let newItem = Item(timestamp: Date()) modelContext.insert(newItem) } } private func deleteItems(offsets: IndexSet) { withAnimation { for index in offsets { modelContext.delete(items[index]) } } } }
2
0
334
Dec ’24
Setting multiple alignment guides in SwiftUI behaves strangely
Hello. Recently, while studying alignmentGuide, I had questions about it behaving differently from the documentation when setting multiple alignment guides. For example, the document states that only the alignmentGuide modifier with a first parameter matching the container's alignment will function. Therefore, I thought that writing the Swift code below would result in the yellow color's center alignment being aligned with the HStack's bottom alignment. struct TestView: View { var body: some View { HStack(alignment: .bottom) { Color.yellow .frame(height: 50) .alignmentGuide(VerticalAlignment.center) { dim in dim[.top] } .alignmentGuide(VerticalAlignment.top) { dim in dim[.bottom] } .alignmentGuide(VerticalAlignment.bottom) { dim in dim[VerticalAlignment.center] } Text("Hello, world") } .border(.green) } } Expect However, in reality, I observed that the top of the yellow color aligns with the HStack's bottom alignment. From this, I inferred that the 3rd alignmentGuide is applied first, and this also causes the first alignmentGuide to work, which makes me curious about how this is possible. If I leave only the 3rd alignmentGuide, it behaves as I expected. Real Behavior Could anybody help me to figure it out this behavior? Thank you
1
0
319
Dec ’24
Whats the Appkit equivalent of SwiftUI's NavigationSplitView?
How do I implement the same Navigation split view with a side bar in Appkit? Basically I have this code: import SwiftUI struct ContentView: View { var body: some View { NavigationSplitView { // Sidebar List { NavigationLink("Item 1", value: "Item 1 Details") NavigationLink("Item 2", value: "Item 2 Details") NavigationLink("Item 3", value: "Item 3 Details") } .navigationTitle("Items") } content: { // Main content (detail view for selected item) Text("Select an item to see details.") .padding() } detail: { // Detail view (for the selected item) Text("Select an item from the sidebar to view details.") .padding() } } } struct MyApp: App { var body: some Scene { WindowGroup { ContentView() } } } and wanted to somehow convert it to Appkit. I tried to use an NSSplitViewController but I still don't have that side bar and that button to collapse it, how do I go about this?
2
0
626
Dec ’24
onPreferenceChange closure is now nonIsolated?
Running up Xcode 16.2 Beta 1, a lot of my code that used onPreferenceChange in Views to change @State properties of those views, such as some notion of a measured width is now complaining about mutating the @MainActor-isolated properties from Sendable closures. Now I've got to hoop-jump to change @State properties from onPreferenceChange? OK, but seems a bit of extra churn.
8
12
2.0k
Dec ’24
Some colors are missing during first app launch
Recently I decided to download my app from the App Store and found out that during the first launch some colors were missing or displayed incorreclty. For example one button was blue, although switching dark mode on and off solved button color it. Some colors were completely missing and the tab bar buttons were blue as well. Any advices? I'm using iOS 18.2 and XCode 16.1
1
0
333
Dec ’24
Rounded button in realitykit using swiftui
I'm developing an ar app using reality kit and Arkit and i want to have my buttons in the same theme of vision os buttons thin , transparent background and round at corners.Following is the code i have written and need help with it func createButton(label: String, position: SIMD3<Float>) -> ModelEntity { let button = ModelEntity(mesh: .generateBox(size: [0.3, 0.1, 0.02], cornerRadius: 10), materials: [SimpleMaterial(color: .blue, isMetallic: false)]) button.generateCollisionShapes(recursive: true) button.position = position // Add button label let buttonText = ModelEntity(mesh: .generateText(label, extrusionDepth: 0.005, font: .systemFont(ofSize: 0.05))) buttonText.model?.materials = [SimpleMaterial(color: .white, isMetallic: true)] buttonText.position = [-0.07, -0.02, 0.01] button.addChild(buttonText) return button }
1
0
568
Dec ’24
How to combine contextMenu & RoundedRectangle?
I am trying to create a list of not rectangular elements, each of which has a context menu. However, I am encountering an issue with the corners when performing a long press. What is the correct way to use such a combination? I don't want to use List because of its default styling. The issue takes place only while animation is in progress. Here's a simplified code example that can be copied pasted and ran in one file. The video was recorded on the device with iOS 18.2 import SwiftUI @main struct MyApp: App { var body: some Scene { WindowGroup { TestView() } } } struct TestView: View { let items = ["Item 1", "Item 2", "Item 3"] var body: some View { VStack { ForEach(items, id: \.self) { item in HStack { Text(item) Spacer() Image(systemName: "star") } .padding() .background(.yellow) // tried all these in different combinations, none works .contentShape(RoundedRectangle(cornerRadius: 10)) .clipShape(RoundedRectangle(cornerRadius: 10)) .containerShape(RoundedRectangle(cornerRadius: 10)) .contextMenu { Button { print("Edit \(item)") } label: { Text("Edit"); Image(systemName: "pencil") } } } } .padding() } } #Preview { TestView() }
1
0
350
Dec ’24
Can't use Link in .systemLarge widget
I just added a .systemLarge widget to my app, but I can't get Links to work. I want the user to be able to tap one of the four rows in my widget - like the EmojiRangers example - but I can't get it to work. I watched a Developer video from WWDC20: https://developer.apple.com/videos/play/wwdc2020/10036?time=223 The guy, Izzy, 'simply' embeds an HStack in a Link, and hey presto! It all works. But that doesn't happen for me. There's clearly some code in the background that runs. I already have .widgetURL working for .systemSmall and .systemMedium widgets, and I don't need to use Links on those two types. Those work by sending a URL to .onOpenURL { incomingURL in ... All good there, no issues. I've wrapped each row in the large widget in a Link with the URL of something like myappurlscheme://widgetTapped/widgetId (it's the same url as that used in the small and medium widgets). I build & run. I tap a row. It doesn't act as though a row is tappable (it doesn't go slightly transparent), and just opens the app without hitting .onOpenURL or anything else. Nothing in my scene delegate is triggered. Is there a specific delegate method that gets called? Do I need to set up some awful intents? I'm not using any sort of NavigationStack here; that model doesn't fit my app. Any ideas? Thanks.
1
0
522
Dec ’24
SwiftUI: How to create different background colors for List sections?
I'm trying to achieve a specific UI design in SwiftUI where the bottom section of my List has a different background color than the top section. For example in the Medications portion of the Health app, the "Your Medications" Section has a different background than the top "Log" Section. How do I achieve this?: Here some example code. I wonder if I am supposed to use two Lists instead. If I use two Lists though and nest it in a ScrollView, the height of the lists needs to be specified. I am working with dynamic content, though so I don't think that is ideal. class ProtocolMedication {} // Example model struct HomeView: View { @Query private var protocolMedications: [ProtocolMedication] var body: some View { NavigationStack { List { // Upper sections with default background Section { Text("Content 1") } header: { Text("Log") } // Bottom section that needs different background Section { ForEach(protocolMedications) { medication in Text(medication.name) } } header: { Text("Your Medications") } } .listStyle(.insetGrouped) } } }
1
0
625
Dec ’24
Storyboard target in Beta
I am currently running Xcode Version 14.0 beta (14A5228q) creating a Multiplatform app. I wanted to include a LaunchScreen so added a Launch Screen Storyboard to my project. To the the app to see it I went under Target for my app, General, and under App Icons and Launch Screen I set the Launch Screen File to my storyboard. This works perfectly when I run the app on iOS; however, when I run it on macOS I get an error:Launch Screen.storyboard error build: iOS storyboards do not support target device type "Mac". I see there's no way to differentiate between macOS and iOS with the file and there's only one target. Does anyone know a way to make the storyboard only launch when running the iOS app (and iPadOS) and not be seen when running macOS? Thanks
2
0
1.8k
Dec ’24
Is there any plans to isolate alignmentGuide's computeValue closure?
Hello. I am developing an application using Swift 6 and SwiftUI. I have custom implemented a BottomSheet that animates from bottom to top, and I attempted to achieve this animation by changing the alignmentGuide like this. ZStack(alignment: .bottom) { dimView .opacity(isVisible ? 1 : 0) .transaction { transaction in transaction.animation = .easeInOut(duration: 0.35) } bottomSheetView .alignmentGuide(VerticalAlignment.bottom) { dimension in // compile error occur because isVisible property is state of MainActor isolated View! isVisible ? dimension[.bottom] : dimension[.top] } } There were no issues in Swift 5, but now I am encountering compile errors because the computeValue closure of the alignmentGuide is not isolated to the MainActor, preventing me from calling view state values or functions. So I am curious if there are any plans to isolate this closure to the MainActor. From my observation, this closure is always called on the main thread. Thank you.
1
0
358
Dec ’24
Updating EditButton
I am trying to update the EditButton after deleting rows in a List, but its title doesn't change. I have sent an update event via a publisher that applies the mode change based on the number of items remaining in the list. Here's the update event handler: .onReceive(updateViewPublisher, perform: { _ in self.editMode?.wrappedValue = textFileData.textFiles.count == 0 ? .inactive : .active update += 1 })``` The edit mode is changed to inactive when the list is empty, but the button continues to display 'done'. If I adda new list item it remains set to 'done' and the delete control is displayed against the new item. I have seen loads of posts about this on various sites, but no solutions. I am trying this on Xcode 16.2 and IOS 18.2. If someone from Apple sees this, a reply would be most welcome.
2
0
292
Dec ’24
SwiftData + CKSyncEngine
Hi, I'm building a habit tracking app for iOS and macOS. I want to use up to date technologies, so I'm using SwiftUI and SwiftData. I want to store user data locally on device and also sync data between device and iCloud server so that the user could use the app conveniently on multiple devices (iPhone, iPad, Mac). I already tried SwiftData + NSPersistentCloudKitContainer, but I need to control when to sync data, which I can't control with NSPersistentCloudKitContainer. For example, I want to upload data to server right after data is saved locally and download data from server on every app open, on pull-to-refresh etc. I also need to monitor sync progress, so I can update the UI and run code based on the progress. For example, when downloading data from server to device is in progress, show "Loading..." UI, and when downloading finishes, I want to run some app business logic code and update UI. So I'm considering switching from NSPersistentCloudKitContainer to CKSyncEngine, because it seems that with CKSyncEngine I can control when to upload and download data and also monitor the progress. My database schema (image below) has relationships - "1 to many" and "many to many" - so it's convenient to use SwiftData (and underlying CoreData). Development environment: Xcode 16.1, macOS 15.1.1 Run-time configuration: iOS 18.1.1, macOS 15.1.1 My questions: 1-Is it possible to use SwiftData for local data storage and CKSyncEngine to sync this local data storage with iCloud? 2-If yes, is there any example code to implement this? I've been studying the "CloudKit Samples: CKSyncEngine" demo app (https://github.com/apple/sample-cloudkit-sync-engine), but it uses a very primitive approach to local data storage by saving data to a JSON file on disk. It would be very helpful to have the same demo app with SwiftData implementation! 3-Also, to make sure I don't run into problems later - is it okay to fire data upload (sendChanges) and download (fetchChanges) manually with CKSyncEngine and do it often? Are there any limits how often these functions can be called to not get "blocked" by the server? 4-If it's not possible to use SwiftData for local data storage and CKSyncEngine to sync this local data storage with iCloud, then what to use for local storage instead of SwiftData to sync it with iCloud using CKSyncEngine? Maybe use SwiftData with the new DataStore protocol instead of the underlying CoreData? All information highly appreciated! Thanks, Martin
3
0
1.3k
Dec ’24
[iOS 18.2 Beta] LazyVGrid within NavigationStack breaks animations
Hello. There seems to be a bug specifically in the iOS 18.2 (both Beta 1 and 2) and not seen in the previous versions. The bug is: when LazyVGrid is nested inside NavigationStack and some elements of the LazyVGrid have animations, navigating into any nested view and then going back to the initial view with the LazyVGrid causes all animations to stop working. Here is the example code inline: struct ContentView: View { @State private var count: Int = 0 var body: some View { NavigationStack { LazyVGrid( columns: Array( repeating: GridItem(spacing: 0), count: 1 ), alignment: .center, spacing: 0 ) { VStack { Text(String(count)) .font(.system(size: 100, weight: .black)) .contentTransition(.numericText()) .animation(.bouncy(duration: 1), value: count) Button("Increment") { count += 1 } NavigationLink(destination: { Text("Test") }, label: { Text("Navigate") }) } } } .padding() } } Once you run the application on iOS 18.2 Beta (I've tried on a real device only), the steps to reproduce are: Tap on the "Increment button" You should see the number change with an animation Tap on the "Navigate" button Tap "Back" to go to the initial screen Tap "Increment" again The number changes without an animation I can confirm that this affects not only .contentTransition() animation but any animation within the LazyVGrid, I've tested this in my real app. Let me know if I can provide more details. Thank you!
8
2
949
Dec ’24