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

Emulate AppKit NSPopUpButton in SwiftUI
How to make a control that looks and feels as close as possible to NSPopUpButton in SwiftUI, so a Mac user accepts the control as being native Mac UI? Items should have icon and text, I need separators between some items and certain items may be disabled at times, so they should not be selectable. Picker seems to lack some of those features (separators and disabled items), and Menu looks and behaves differently. Any guidance? For now I went with Menu, but find both the "chevron.down" icon at the trailing end as well as the positioning of the menu below the control weird.
Topic: UI Frameworks SubTopic: SwiftUI
2
0
38
3w
Using .glassEffect in Charts
Hi, I was wondering if it's possible (and advisable) to use the new glass effects available in iOS 26 in Swift Charts? For example, in a chart like the one in the image I've attached to this post, I was looking to try adding a .glassEffect modifier to the BarMarks to see how that would look and feel. However, it seems it's not available directly on the BarMark (ChartContent) type, and I'm having trouble adding it in other ways too, such as using in on the types I supply to modifiers like foregroundStyle or clipShape. Am I missing anything? Maybe it's just not advisable or necessary to use glass effects within Charts?
3
0
109
3w
SwiftUI List features within complex grids of content
Our app displays complex, data-driven layouts that can display grids of items in addition to full width rows (essentially, nested lists). We'd like to be able to preserve cell/item portability (i.e., display in any content strip) and allow them to carry capabilities like swipe actions. In UIKit we have features in compositional layout that allow for this. However, in SwiftUI the only support seems to be at the List level. Nesting a List within a ScrollView to get swipe actions feels like a dark road. We've rolled our own swipe actions system, but we'd much rather use a native solution. Any other options here? Improvement ticket here FB17994843.
1
1
42
3w
SwiftUI @State var not sync in .popover
struct ContentView: View { @State var visable: Bool = false @State var visableHiddenMenu: Bool = false var body: some View { VStack { Button("xxxx") { visableHiddenMenu = true print("visableHiddenMenu \(visableHiddenMenu)") visable.toggle() } .popover(isPresented: $visable) { VStack { let _ = print("visableHiddenMenu2 \(visableHiddenMenu)") Text("xxxx") } .onAppear { print("appear \(visableHiddenMenu)") visableHiddenMenu = visableHiddenMenu } } } .padding() } } the print is visableHiddenMenu true visableHiddenMenu2 false appear true so why visableHiddenMenu2 print false?
4
0
63
3w
Significant scrolling lag when using .focused modifier in large LazyVStack/LazyHStack on tvOS
Summary: When using the new .focused modifier to track focus within a large LazyVStack or LazyHStack, we observe a major frame-rate drop and stuttering on Apple TV (1st and 2nd generation). Steps to Reproduce: Create a LazyVStack (or LazyHStack) displaying a substantial list of data models (e.g., 100+ GroupData items). Attach the .focused(::) modifier to each row, binding to an @FocusState variable of the same model type. Build and run on an Apple TV device or simulator. Scroll through the list using the remote. static func == (lhs: GroupData, rhs: GroupData) -> Bool { lhs.id == rhs.id } var id: String var name: String var subName: String var subGroup: [GroupData] = [] var logo: URL? } struct TestView: View { @FocusState var focusedGroup: GroupData? let groupsArr: [GroupData] var body: some View { ScrollView { LazyVStack { ForEach(groupsArr, id: \.id) { group in Button { } label: { GroupTestView(group: group) } .id(group.id) .focused($focusedGroup, equals: group) } } } } } struct GroupTestView: View { let group: GroupData var body: some View { HStack { KFImage.url(group.logo) .placeholder { Image(systemName: "photo") .opacity(0.2) .imageScale(.large) } .resizable() .scaledToFit() .frame(width: 70) VStack { Text(group.name) Text(group.subName) } } } } Expected Behavior Scrolling remains smooth (60 fps) regardless of list size. Focus updates without introducing visible lag. Observed Behavior Frame rate drops significantly when .focused is applied. Scrolling becomes visibly laggy, especially on older Apple TV hardware. Even when binding an @FocusState<String?> (storing only the id), performance improves slightly but remains suboptimal. Workarounds Tried Switched to @FocusState of type String to track only the ID of each group, this has helped but there is still a big performance decrease. Minimised view-body complexity and removed other modifiers. Verified that excluding .focused entirely restores smooth scrolling. Any guidance or suggestions would be greatly appreciated.
2
1
87
3w
Search field as in Mail App
How can i achieve the same behavior as the bottom bar on the Mail app? Button -> Search Field -> Button right now, if do as follows, they overlap as if they are not in the same space NavigationStack { VStack { HeaderView() ListView() } } .toolbar(.hidden, for: .tabBar) .searchable(text: $searchText) .searchToolbarBehavior(.minimize) .toolbar { ToolbarItem(placement: .bottomBar) { Button { } label: { Label("Button1", systemImage: "person") } } ToolbarItem(placement: .bottomBar) { Button { } label: { Label("Button2", systemImage: "person") } } }
1
0
70
3w
Best way to combine new tab bar with floating action button?
I have a floating action button in my app above a toolbar. The action button adds items to my app, so is pretty important and should be easy to reach. Now with the new liquid glass design, I wonder what the best way is to combine those two. Should I use .tabViewBottomAccessory() for that? Though, that will merge down on scroll. 🤔 Or can I replace the search button in the bottom right with my own custom button action?
1
0
80
3w
Push Notifications for Widgets
With the advent of APNs pushs to Widgets, I would like to confirm some things. I understand that we have a budget of updates for it, however is the budget for APNs part of the budget for background updates? In other words, 1 budget for both or 2 separate budgets? Also, can we make a push to an individual widget, or are we essentially calling .reloadAllTimelines()?
1
0
49
3w
Child Views and ViewThatFits
I'd like to support different template views within a ViewThatFits for items within a list, allowing the list to optimize its layout for different devices. Within the child views is a Text view that is bound to the name of an item. I'd rather the Text view simply truncate the text as necessary although it instead is influencing which view is chosen by ViewThatFits. I'd also rather not artificially set the maxWidth of the Text view as it artificially limits the width on devices where it's not necessary (e.g. iPad Pro vs. iPad mini or iPhone). Any guidance or suggestions on how this can be accomplished as it looks very odd for the layout of one row in the list to be quite different than the rest of the rows.
0
0
35
3w
SwiftUI: dynamicTypeSize doesn't work for items in a List
Hi, I have a List and I want to limit the dynamic text size for some of the elements in the list's row item view. I created a test view below. The ".dynamicTypeSize(.large)" restriction only works if it's applied to the List view, not if it's set for the the ContentItemView in the ForEach below. Is there a reason for this? Do I need to do something else to limit a list row to a certain size? The example only has a text field, but I want to do this for a Image with some text inside it, and I wanted to restrict that text field, but it doesn't seem to work when the view is inside a List row. Please let me know if there's a workaround for it. import SwiftUI import CoreData struct ContentView: View { @FetchRequest( sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)], animation: .default) private var items: FetchedResults<Item> @State private var multiSelectedContacts = Set<Item.ID>() var body: some View { NavigationStack { List (selection: $multiSelectedContacts) { ForEach(items) { item in ContentItemView(item: item) } .dynamicTypeSize(.large) // <-- doesn't works } .dynamicTypeSize(.large) // <-- THIS WORKS } } } struct ContentItemView: View { @Environment(\.managedObjectContext) private var viewContext @ObservedObject var item: Item @State var presentConfirmation = false var body: some View { HStack { if let timestamp = item.timestamp, let itemNumber = item.itemNumber { Text("\(itemNumber) - \(timestamp, formatter: itemFormatter)") } } .popover(isPresented: $item.canShowPopover, content: { Text("Test Item Label") .frame(width: 100, height: 150) }) } } private let itemFormatter: DateFormatter = { let formatter = DateFormatter() formatter.dateStyle = .short formatter.timeStyle = .long return formatter }() #Preview { ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext) }
2
2
587
3w
In navigationLink closure, FocusState doesn't work in sheet
Hello, I have a question about FocusState, navigationLink and sheet, the code which in navigationLink closure doesn’t work, but work without navigationLink, just like the following code struct ContentView: View { var body: some View { NavigationStack { // this work interView() // this doesn't work NavigationLink { interView() } label: { Text("into interView") } } } } struct interView: View { @FocusState var focusStateA : Int? @State var show : Bool = false @State var text: String = "" var body: some View { ScrollView { VStack { coreView Button("Detail") { show.toggle() } } .sheet(isPresented: $show, content: { coreView }) } } } extension interView { var coreView : some View { VStack { VStack { putdown TextField("hi", text: $text) .focused($focusStateA , equals: 1) } } } var putdown : some View { Button(action: { if focusStateA != nil { focusStateA = nil print("OK") } else { print("It's nil") } }, label: { Text("Put down the keyboard") }) } } and there are some strange phenomena, I must put all view into a scrollview, otherwise, it even doesn’t work without navigationLink This problem has existed in IOS 18, and now in IOS26 still doesn’t be settled, is it a problem or some character?
Topic: UI Frameworks SubTopic: SwiftUI
0
0
29
3w
IOS 26 Beta, Unexpected Liquid Navigation Bar Blured the whole View
I use .scaleEffect(x: 1, y: -1, anchor: .center) to reverse the messages list, so that the latest message always at the bottom. This is correct in ios18, but blurred the whole view in ios26. Complete code: ScrollView { Rectangle() .fill(.clear) .frame(height: 10) // if messages.isEmpty { // MessagesEmpty() // .padding(.horizontal, 10) // .scaleEffect(x: 1, y: -1, anchor: .center) // } MessageInput(chat: chat) .padding(.horizontal, 10) .scaleEffect(x: 1, y: -1, anchor: .center).id("#messag-input-identifier") LazyVStack(spacing: 10) { ForEach(messages) { (message: Message) in MessageItem(message: message, activation: $activeMessageId, audioAdapter: AudioAdapter.shared).id(message.id) } .padding(.horizontal, 10) .scaleEffect(x: 1, y: -1, anchor: .center) } Rectangle() .fill(.clear) .frame(height: 20) } .scaleEffect(x: 1, y: -1, anchor: .center) As shown in the screenshot WechatIMG49.jpg(using ios26beta which is incorrect), WechatIMG50.jpg(using ios18 which is correct) my messages list displays normally on iOS 18, but when using iOS 26 Beta, the entire view is blurred. IOS 26 Beta(Error): IOS 18(Correct):
Topic: UI Frameworks SubTopic: SwiftUI Tags:
0
0
110
3w
Popover, Menu and Sheet not working with RealityView Attachment SwiftUI
Hi, I have a SwiftUI View, that is attached to a 3D object in Reality View. This is supposed to be a HUD for the user to select a few things. I wanted a sub menu for one of the top level buttons. But looks like none of the reasonable choices like Menu, Sheet or Popover work. Is there a known limitation of RealityKit Views where full SwiftUI cannot be used? Or am I doing something wrong? For example, Button { SLogger.info("Toggled") withAnimation { showHudPositionMenu.toggle() } } label: { HStack { Image(systemName: "rectangle.3.group") Text("My Button") } } .popover(isPresented: $showHudPositionMenu, attachmentAnchor: attachmentAnchor) { HudPositionMenuItems(showHudPositionMenu: $showHudPositionMenu, currentHudPosition: $currentHudPosition) } This will print "Toggled" but will not display the MenuItems Popover. If it makes any difference, this is attached to a child of a head tracked entity.
1
0
47
3w