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

Posts under SwiftUI tag

200 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

iOS 26 ScrollView with static background image
I need a layout where I have a ScrollView with some content, and ScrollView has full screen background image. Screen is pushed as detail on stack. When my screen is pushed we display navigation bar. We want a new scrollEdgeEffectStyle .soft style work. But when we scroll the gradient blur effect bellow bars is fixed to top and bottom part of the scroll view background image and is not transparent. However when content underneath navigation bar is darker and navigation bar changes automatically to adapt content underneath the final effect looks as expected doesn't use background image. Expected bahaviour for us is that the effect under the navigation bar would not use background image but would be transparent based on content underneath. This is how it is intialy when user didn't interact with the screen: This is how it looks when user scrolls down: This is how it looks when navigation bar adapts to dark content underneath: Minimal code to reproduce this behaviour: import SwiftUI @main struct SwiftUIByExampleApp: App { var body: some Scene { WindowGroup { ContentView() } } } struct ContentView: View { var body: some View { NavigationStack { ScrollView(.vertical) { VStack(spacing: 0.0) { ForEach(1 ..< 101, id: \.self) { i in HStack { Text("Row \(i)") Spacer() } .frame(height: 50) .background(Color.random) } } } .scrollEdgeEffectStyle(.soft, for: .all) .scrollContentBackground(.hidden) .toolbar { ToolbarItem(placement: .title) { Label("My Awesome App", systemImage: "sparkles") .labelStyle(.titleAndIcon) } } .toolbarRole(.navigationStack) .background( ZStack { Color.white .ignoresSafeArea() Image(.sea) .resizable() .ignoresSafeArea() .scaledToFill() } ) } } } extension Color { static var random: Color { Color( red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1) ) } } We've also tried using ZStack instead of .background modifier but we observed the same results. We want to basically achieve the same effect as showcased here, but with the static background image: https://youtu.be/3MugGCtm26A?si=ALG29NqX1jAMacM5&t=634
0
0
29
6h
`ContextMenu` and `Menu` Item Layout: Icon/Title Order Discrepancy Between System and Custom Apps (iOS 26)
I've observed a difference in the layout of menu items within ContextMenu and Menu when comparing system applications to my own SwiftUI app, specifically concerning the order of icons and titles. On iOS 26, system apps (as shown in the image in the "System App" column) appear to display the item's icon before its title for certain menu items. However, in my SwiftUI app, when I use a Label (e.g. Label("Paste", systemImage: "doc.on.clipboard")) or an HStack containing an Image and Text, the icon consistently appears after the title within both ContextMenu and Menu items. I'm aiming to achieve the "icon first, then title" layout as seen in system apps. My attempts to arrange this order using HStack directly within the Button's label closure: Menu { Button { /* ... */ } label: { HStack { Image(systemName: "doc.on.clipboard") Text(String(localized: "Paste")) } } // ... } label: { Text("タップミー") } seem to be overridden or restricted by the OS, which forces the icon to the leading position (as shown in the image in the "Custom App" column). System App Custom App Is there a specific SwiftUI modifier, or any other setting I might have overlooked that allows developers to control the icon/title order within ContextMenu or Menu items to match the system's behavior? Or is this a system-controlled layout that app developers currently cannot customize, and we need to wait for potential changes from Apple to expose this capability for in-app menus? Thanks in advance!
1
0
107
11h
Buttons in the bottom bar of an inspector appear disabled
Buttons placed in the bottomBar and keyboard toolbar item positions in an inspector appear disabled/grayed out when at the large presentation detent. The same is not true for sheets. Is this intentional or a bug? If intentional, is there any backing design theory in the Human Interface Guidelines for it? Xcode 16.4 / 18.5 simulator // Inspector @ large detent struct ContentView: View { var body: some View { Color.clear .inspector(isPresented: .constant(true)) { Color.clear .presentationDetents([.large]) .toolbar { ToolbarItem(placement: .bottomBar) { Button("Save") {} .border(.red) } } } } } // Sheet struct ContentView: View { var body: some View { Color.clear .sheet(isPresented: .constant(true)) { Color.clear .presentationDetents([.medium]) .toolbar { ToolbarItem(placement: .bottomBar) { Button("Save") {} .border(.red) } } } } }
0
0
78
20h
When placing a TextField within a RealityViewAttachment, the virtual keyboard does not appear in front of the user as expected.
Hello, Thank you for your time. I have a question regarding visionOS app development. When placing a SwiftUI TextField inside RealityView.attachments, we found that focusing on the field does not bring up the virtual keyboard in front of the user. Instead, the keyboard appears around the user’s lower abdomen area. However, when placing the same TextField in a regular SwiftUI layer outside of RealityView, the keyboard appears in the correct position as expected. This suggests that the issue is specific to RealityView.attachments. We are currently exploring ways to have the virtual keyboard appear directly in front of the user when using TextField inside RealityViewAttachments. If there is any method to explicitly control the keyboard position or any known workarounds—including alternative UI approaches—we would greatly appreciate your guidance. Best regards, Sadao Tokuyama
1
1
190
1d
App is crashing on iPad after upgrading to iOS 26 when we push from one screen to another with data using segue but working fine on iPhone
Error: Fatal error: init(coder:) has not been implemented File: UIKitCore/UICoreHostingView.swift:54 Stack Trace Snippet: swift Copy Edit UIKitCore/UICoreHostingView.swift:54: Fatal error: init(coder:) has not been implemented Can't show file for stack frame: &lt;DBGLldbStackFrame: 0x10ca74560&gt; - stackNumber: 23 name: @objc ThemeableViewController.init(coder:). The file path does not exist on the file system: /
1
0
130
10h
Using SwiftUI .sheet: ScrollView rendering issue when used inside NavigationStack
I am encounter an issue with the height of a ScrollView not rendering properly during the transition of a sheet from closed to open. This results in a gap between the bottom edge of the ScrollView and the bottom edge of the sheet during the animation. I am getting this issue when trying to use the ScrollView inside a NavigationStack and when using a PresentationDetent other than .large. The code snippet below, for example, suffers from the issue. ScrollView { Button("Reveal sheet") { isPresented = true } } .frame(maxWidth: .infinity) .background(.yellow) .sheet(isPresented: $isPresented) { VStack { NavigationStack { ScrollView { ForEach(0..<100, id: \.self) { number in Text("\(number)") } .frame(maxWidth: .infinity) } .background(.green) .presentationDetents([.medium]) } } } Here is what the issue looks like for this example. The issue occurs in: Simulator iPhone 16 iOS 18.4 Personal device (iPhone 16 iOS 18.4) Canvas preview
1
0
87
2d
iOS 26: .tabViewBottomAccessory - How to open a new view on the tabViewBottomAccessory
If you are currently on the beta of iOS 26, open Apple Music and you'll see a tabViewBottomAccessory that is the mini NowPlayingView. When tapped, it opens the NowPlayingView. Is there a similar way to do this in SwiftUI? Looking through Apple's documentation, they do not specify any way to reproduce the same kind of view transition. This is the Apple Music app with the tabViewBottomAccessory. When clicked it opens the NowPlayingView
0
0
49
2d
SwiftUI App Intent throws error when using requestDisambiguation with @Parameter property wrapper
I'm implementing an App Intent for my iOS app that helps users plan trip activities. It only works when run as a shortcut but not using voice through Siri. There are 2 issues: The ShortcutsTripEntity will only accept a voice input for a specific trip but not others. I'm stuck with a throwing error when trying to use requestDisambiguation() on the activity day @Parameter property. How do I rectify these issues. This is blocking me from completing a critical feature that lets users quickly plan activities through Siri and Shortcuts. Expected behavior for trip input: The intent should make Siri accept the spoken trip input from any of the options. Actual behavior for trip input: Siri only accepts the same trip when spoken but accepts any when selected by click/touch. Expected behavior for day input: Siri should accept the spoken selected option. Actual behavior for day input: Siri only accepts an input by click/touch but yet throws an error at runtime I'm happy to provide more code. But here's the relevant code: struct PlanActivityTestIntent: AppIntent { @Parameter(title: "Activity Day") var activityDay: ShortcutsItineraryDayEntity @Parameter( title: "Trip", description: "The trip to plan an activity for", default: ShortcutsTripEntity(id: UUID().uuidString, title: "Untitled trip"), requestValueDialog: "Which trip would you like to add an activity to?" ) var tripEntity: ShortcutsTripEntity @Parameter(title: "Activity Title", description: "The title of the activity", requestValueDialog: "What do you want to do or see?") var title: String @Parameter(title: "Activity Day", description: "Activity Day", default: ShortcutsItineraryDayEntity(itineraryDay: .init(itineraryId: UUID(), date: .now), timeZoneIdentifier: "UTC")) var activityDay: ShortcutsItineraryDayEntity func perform() async throws -> some ProvidesDialog { // ...other code... let tripsStore = TripsStore() // load trips and map them to entities try? await tripsStore.getTrips() let tripsAsEntities = tripsStore.trips.map { trip in let id = trip.id ?? UUID() let title = trip.title return ShortcutsTripEntity(id: id.uuidString, title: title, trip: trip) } // Ask user to select a trip. This line would doesn't accept a voice // answer. Why? let selectedTrip = try await $tripEntity.requestDisambiguation( among: tripsAsEntities, dialog: .init( full: "Which of the \(tripsAsEntities.count) trip would you like to add an activity to?", supporting: "Select a trip", systemImageName: "safari.fill" ) ) // This line throws an error let selectedDay = try await $activityDay.requestDisambiguation( among: daysAsEntities, dialog:"Which day would you like to plan an activity for?" ) } } Here are some related images that might help:
0
0
68
3d
Preview crashes when using ForEach with a Binding to an array and generics
The following repro case results in a previews crash on Xcode 26 beta 3 (report attached). FB18762054 import SwiftUI final class MyItem: Identifiable, Labelled { var label: String init(_ label: String) { self.label = label } } protocol Labelled { var label: String { get } } struct HelloView: View { let label: String var body: some View { Text(label) } } struct ListView<Element: Labelled & Identifiable>: View { @Binding var elements: [Element] var body: some View { List { ForEach($elements, id: \.id) { $element in HelloView(label: element.label) // crash // Replacing the above with a predefined view works correctly // Text(element.label) } } } } struct ForEachBindingRepro: View { @State var elements: [MyItem] = [ MyItem("hello"), MyItem("world"), ] var body: some View { ListView(elements: $elements) } } #Preview("ForEachBindingRepro") { ForEachBindingRepro() } foreachbindingrepro-2025-07-12-020628.ips
6
0
132
2d
Different toolbar item placement for iPhone vs iPad
On iPhone, I would like to have a more button at the top right of the navigation bar, a search field in the bottom toolbar, and a plus button to the right of the search field. I've achieved this via the code below. But on iPad they should be in the navigation bar at the trailing edge from left to right: plus, more, search field. Just like the Shortcuts app, if there's not enough horizontal space, the search field should collapse into a button, and with even smaller space the search bar should become full-width under the navigation bar. Right now on iPad the search bar is full width under the navigation bar, more at top right, plus at bottom middle, no matter how big the window is. How can I achieve that? Any way to specify them for the system to more automatically do the right thing, or would I need to check specifically for iPhone vs iPad UIDevice to change the code? struct ContentView: View { @State private var searchText = "" var body: some View { NavigationStack { VStack { Text("Hello, world!") } .navigationTitle("Test App") .searchable(text: $searchText) .toolbar { ToolbarItem { Menu { //... } label: { Label("More", systemImage: "ellipsis") } } DefaultToolbarItem(kind: .search, placement: .bottomBar) ToolbarSpacer(.fixed, placement: .bottomBar) ToolbarItem(placement: .bottomBar) { Button { print("Add tapped") } label: { Label("Add", systemImage: "plus") } } } } } }
2
0
49
3d
How to hide scroll edge effect until scroll down
I present a view in a sheet that consists of a navigation stack and a scroll view which has a photo pushed to the top by setting .ignoresSafeArea(edges: .top). The problem is the top of the photo is blurry due to the scroll edge effect. I would like to hide the scroll edge effect so the photo is fully visible when scrolled to the top but let the effect become visible upon scrolling down. Is that possible? struct ContentView: View { @State private var showingSheet = false var body: some View { VStack { Button("Present Sheet") { showingSheet = true } } .sheet(isPresented: $showingSheet) { SheetView() } } } struct SheetView: View { @Environment(\.dismiss) private var dismiss var body: some View { NavigationStack { ScrollView { VStack { Image("Photo") .resizable() .scaledToFill() } } .ignoresSafeArea(edges: .top) .toolbar { ToolbarItem(placement: .cancellationAction) { Button(role: .close) { dismiss() } } ToolbarItem { EditButton() } } } } }
1
0
57
4d
UISearchBar .minimal no background when compiled on Xcode 26
When compiled on Xcode 16.4.0: When compiled on Xcode 26: The code: import SwiftUI struct SearchBarController: UIViewRepresentable { @Binding var text: String var placeholderText: String class Coordinator: NSObject, UISearchBarDelegate { @Binding var text: String init(text: Binding<String>) { _text = text } func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) { text = searchText } } func makeUIView(context: Context) -> UISearchBar { let searchBar = UISearchBar(frame: .zero) searchBar.delegate = context.coordinator searchBar.placeholder = placeholderText searchBar.searchBarStyle = .minimal return searchBar } func updateUIView(_ uiView: UISearchBar, context: Context) { uiView.text = text } func makeCoordinator() -> SearchBarController.Coordinator { return Coordinator(text: $text) } }
2
0
47
3d
Liquid glass: UIPageViewController inside UITabbarController adding blur effect always in iOS26
When using UIPageViewController inside a UITabBarController on iOS 26 with Liquid Glass adoption, visiting the PageViewController tab applies a blur effect to the navigation bar and tab bar even though the current child view controller of the pageView is not scrollable and does not reach behind these bars. Questions: Is this the expected behavior that the pageview's internal scroll view causes the bars to blur regardless of the page view's child content’s scrollability? If so, is there an official way to make the blur effect appear only when the pageview's current child view controller actually scrolls behind the navigation bar or tab bar, and not in static cases? Tried the same in SwiftUI using TabView and TabView with page style. Facing the same issue there as well. Sample screenshots for reference, Sample SwiftUI code, struct TabContentView: View { var body: some View { TabView { // First Tab: Paging View PagingView() .tabItem { Label("Pages", systemImage: "square.fill.on.square.fill") } // Second Tab: Normal View NavigationStack { ListView() } .tabItem { Label("Second", systemImage: "star.fill") } // Third Tab: Normal View PageView(color: .blue, text: "Page 3") .tabItem { Label("Third", systemImage: "gearshape.fill") } } .ignoresSafeArea() } } struct PagingView: View { var body: some View { TabView { PageView(color: .red, text: "Page 1") PageView(color: .green, text: "Page 2") PageView(color: .blue, text: "Page 3") } .tabViewStyle(.page) // Enables swipe paging .indexViewStyle(.page(backgroundDisplayMode: .always)) .ignoresSafeArea()// Dots indicator } }
0
0
89
4d
fullscreencover Problem
Hello Apple Developer Community: I have a problem with the fullscreencover. I can see the Things, that shouldn’t be visible behind it. I’m currently developing with iOS 26 and only there it happens. I hope you can help me :) Have a nice day
0
1
21
4d
Looking for a mechanism in iPadOS 26 to 'split a window' into two adjacent windows like it worked in iPadOS 18.
With the new multi-windowing design in iPadOS 26, the behavior of openWindow() has changed. In iPadOS 18, if I called openWindow(), I would go from a full-screen window to two side-by-side windows. That allowed my app to meet the goal of the user; keep some information on the screen while being able to navigate through the app in the other window. In iPadOS 26 (beta 3), this no longer works. Instead, a new Window opens ON top of the current window. I am looking for some mechanism to help the user see that two windows are now present and then easily move them on the screen (tiled, side-by-side) or whatever else they would prefer.
1
0
39
4d
Cannot get drop action to trigger (Xcode 26 beta 3)
I'm unable to find the right combination modifiers to get drag and drop to work using the new .draggable(containerItemID:) and dragContainer(for:in:selection:_:) modifiers. The drag is initiated with the item's ID, the item is requested from the .dragContainer modifier, but the drop closure is never triggered. Minimal repro: struct Item: Identifiable, Codable, Transferable { var id = UUID() var value: String static var transferRepresentation: some TransferRepresentation { CodableRepresentation(contentType: .tab) } } struct DragDrop: View { @State var items: [Item] = [ Item(value: "Hello"), Item(value: "world"), Item(value: "something"), Item(value: "else") ] var body: some View { List(items) { item in HStack { Text(item.value) Spacer() } .contentShape(Rectangle()) .draggable(containerItemID: item.id) .dropDestination(for: Item.self) { items, session in print("Drop: \(items)") } } .dragContainer(for: Item.self) { itemID in print("Drag: \(itemID)") return items.filter { itemID == $0.id } } } } #Preview("Simple") { DragDrop() }
2
0
48
14h
coreml Fetching decryption key from server failed
My iOS app supports iOS 18, and I’m using an encrypted CoreML model secured with a key generated from Xcode. Every few months (around every 3 months), the encrypted model fails to load for both me and my users. When I investigate, I find this error: coreml Fetching decryption key from server failed: noEntryFound("No records found"). Make sure the encryption key was generated with correct team ID To temporarily fix it, I delete the old key, generate a new one, re-encrypt the model, and submit an app update. This resolves the issue, but only for a while. This is a terrible experience for users and obviously not a sustainable solution. I want to understand: Why is this happening? Is there a known expiration or invalidation policy for CoreML encryption keys? How can I prevent this issue permanently? Any insights or official guidance would be really appreciated.
5
2
412
3d
List View within a Scrollview
The bane of my existence has been designing interfaces where the whole view needs to scroll, but a portion is a List and the other portion is static. I run into this problem time and again so I was hoping someone has a good solution because we all know that embedding a List view inside ScrollView is a no-go within SwiftUI. It simply doesn't work. So what is a best practice when you need the whole screen to scroll, but a portion is a List? Use a navigation stack instead of a ScrollView? What if it's a child view of a navigation stack already?
Topic: Design SubTopic: General Tags:
2
0
590
5d
PhaseAnimator without transition between phases
PhaseAnimator seems a good fit to play gifs in SwiftUI: struct ContentView: View { let frames = [UIImage(named: "frame-1")!, UIImage(named: "frame-2")!] var body: some View { PhaseAnimator(frames.indices) { index in Image(uiImage: frames[index]) } } } The problem is that by default, there's an opacity transition between phases. So I tried using transition(.identity): Image(uiImage: gif[index]) .transition(.identity) .id(index) It doesn't work. It stays frozen on the first frame. It does work if I set the transition to a small offset value: Image(uiImage: gif[index]) .transition(.offset(x: 0, y: 0.1)) .id(index) It does feel a bit hacky, though. Is this the expected behavior for .transition(.identity), or is it a bug?
1
0
69
3d