Hello everyone. I'm building a simple Form in a Multiplatform App with SwiftUI. Originally I had something like this.
import SwiftUI
struct OnboardingForm: View {
@State var firstName: String = ""
@State var lastName: String = ""
@State var email: String = ""
@State var job: String = ""
@State var role: String = ""
var body: some View {
Form {
TextField("First Name", text: $firstName, prompt: Text("Required"))
TextField("Last Name", text: $lastName, prompt: Text("Required"))
TextField("Email", text: $email, prompt: Text("Required"))
TextField("Job", text: $job, prompt: Text("Required"))
TextField("Role", text: $role, prompt: Text("Required"))
}
}
}
#Preview {
OnboardingForm()
}
In macOS it looks ok but then in iOS it looks like this:
and it's impossible to know what each field is for if all the prompts are the same. I tried adding LabeledContent around each text field and that solves it for iOS but then on macOS it looks like this:
The labels are shown twice and the columns are out of alignment. I think I could get around it by doing something like this:
#if os(iOS)
LabeledContent {
TextField("First Name", text: $firstName, prompt: Text("Required"))
} label: {
Text("First Name")
}
#else
TextField("First Name", text: $firstName, prompt: Text("Required"))
#endif
but it seems to me like reinventing the wheel. Is there a "correct" way to declare TextFields with labels that works for both iOS and macOS?
Post
Replies
Boosts
Views
Activity
I'm currently building an App using a TabView as the main navigation method. In my app I would like to build a page similar to the Top Charts in the native App Store App with two lists side by side:
So far I came up with this code (simplified demo):
import SwiftUI
struct Demo: View {
var body: some View {
TabView {
Tab("Main Tab", systemImage: "tray.and.arrow.down.fill") {
NavigationStack {
HStack {
List {
Text("Left List")
}
List {
Text("Right List")
}
}
.navigationTitle("Demo")
.navigationBarTitleDisplayMode(.inline)
}
}
}
}
}
#Preview {
Demo()
}
However, I’m encountering a couple of issues:
• Scrolling to the top of the left list doesn’t trigger the toolbar background effect, and the content overlaps with the tabs in a strange way. Scrolling to the top of the right list works as expected.
• The navigation title is always hidden.
I haven’t been able to find a solution to these problems. What would be the correct approach? Thank you!
I'm building a simple App using SwiftData. In my app a user can create, remove and edit posts. When editing, I want them to be able to hit "Save" to persist the changes or "Cancel" to discard the changes. The approach I'm using is to disable autosave and call modelContext.save() when saving and modelContext.rollback() when discarding the changes. So my modelContainer is defined as follows:
WindowGroup {
ContentView()
.modelContainer(for: [Post.self], isAutosaveEnabled: false)
}
and I Save and Cancel like this:
PostForm(post: post)
.toolbar {
ToolbarItemGroup(placement: .cancellationAction) {
Button("Cancel") {
if modelContext.hasChanges {
modelContext.rollback()
}
dismiss()
}
}
ToolbarItemGroup(placement: .confirmationAction) {
Button("Save") {
do {
if modelContext.hasChanges {
try modelContext.save()
}
} catch {
fatalError("Failed to save post: \(error.localizedDescription)")
}
callback?()
dismiss()
}
}
}
The issue I am facing is that after calling modelContext.rollback() my Posts aren't updating in the UI, they still show the changes. Restarting the app shows the Posts without the changes so I'm guessing that modelContext.rollback() is in fact discarding the changes and not persisting them in the Storage, the UI is the one that is not reacting to the change. Am I doing something wrong here? Is this approach correct?
I'm giving a go to the new TabSection with iOS 18 but I'm facing an issue with sections actions. I have the following section inside a TabView:
TabSection {
ForEach(accounts) { account in
Tab(account.name , systemImage: account.icon, value: SelectedTab.accounts(account: account)) {
Text(account.name)
}
}
} header: {
Text("Accounts")
}
.sectionActions {
AccountsTabSectionAddAccount()
}
I'm showing a Tab for each account and an action to create new accounts. The issue I'm facing is that when there are no accounts the entire section doesn't appear in the side bar including the action to create new accounts. To make matters worse the action doesn't show at all in macOS even when there are already accounts and the section is present in side bar. Is there some way to make the section actions always visible?