I have a picker wheel which lets the user choose from a list of languages. After choosing a language and hitting the start button, to begin a foreign phrase quiz, the #State variable that holds the user's language choice is nil when used in a method to obtain the phrases for the chosen language. Of course, the phrases for the chosen language then don't display after tapping the start button.
import SwiftUI
struct TestView: View {
var languages = ["German", "French", "Italian", "Greek"]
#State var selectedLanguage: String?
var body: some View {
NavigationView {
Text("Chosen language is: \(selectedLanguage ?? "Unknown")")
.navigationBarTitle("Test", displayMode: .inline).opacity(0.8)
.toolbar {
ToolbarItemGroup(placement: .navigationBarLeading) {
Picker("Language", selection: $selectedLanguage) {
ForEach(languages, id: \.self) { language in
Text("\(language)")
}
}
}
}
}
}
}
I have two alternate fixes. First, don't use an optional for the selection:
struct TestView: View {
var languages = ["German", "French", "Italian", "Greek"]
#State var selectedLanguage: String = "Unknown"
var body: some View {
NavigationView {
Text("Chosen language is: \(selectedLanguage)")
.navigationBarTitle("Test", displayMode: .inline).opacity(0.8)
.toolbar {
ToolbarItemGroup(placement: .navigationBarLeading) {
Picker("Language", selection: $selectedLanguage) {
ForEach(languages, id: \.self) { language in
Text("\(language)")
}
}
}
}
}
}
}
Second, if you do use an optional, you need to include a .tag() on your view that casts your local variable to the type of the selection like this:
struct TestView: View {
var languages = ["German", "French", "Italian", "Greek"]
#State var selectedLanguage: String?
var body: some View {
NavigationView {
Text("Chosen language is: \(selectedLanguage ?? "Unknown")")
.navigationBarTitle("Test", displayMode: .inline).opacity(0.8)
.toolbar {
ToolbarItemGroup(placement: .navigationBarLeading) {
Picker("Language", selection: $selectedLanguage) {
ForEach(languages, id: \.self) { language in
Text("\(language)")
.tag(language as String?) //Add tag here
}
}
}
}
}
}
}
Personally, I prefer the first because until you have picked a selectedLanguage it is nil and will therefore cause your view to display "Unknown" even though it look like the picker has a chose language. You will have to work around that in your UI.
Related
When using listRowBackground on a SwiftUI List there is no longer any highlighting of the selected item. Using a ButtonStyle for the NavigationLink does not work either.
Are there any sane workaround for this?
Example code:
struct ContentView: View {
struct ContentSection: Identifiable {
let id = UUID()
let title: String
let items: [String]
}
var sections = [
ContentSection(title: "Lorem", items: ["Dolor", "Sit", "Amed"]),
ContentSection(title: "Ipsum", items: ["Consectetur", "Adipiscing", "Elit"])
]
var body: some View {
NavigationView {
List {
ForEach(sections) { section in
Section {
ForEach(section.items, id: \.self) { item in
NavigationLink(destination: Text(item)) {
Text(item)
}
.listRowBackground(Color.orange.ignoresSafeArea())
}
} header: {
Text(section.title)
}
}
}
.listStyle(GroupedListStyle())
}
}
}
Although it is not documented in Apple's documentation, setting a .listRowBackground will wisely remove selection behaviour. What should happen if you set a background of Color.grey which matches the default selection color? Should Apple pick a different color now? How can they be sure the contrast is high enough for the user to tell if the selection is active?
Fortunately you can implement your own selection behaviour using List(selection:, content:) and then comparing the item being rendered in ForEach with the current selected item and changing the background yourself:
struct ContentView: View {
#State var selection: Int?
var body: some View {
List(selection: $selection) {
ForEach(1...5, id: \.self) { i in
Text(i, format: .number)
.listRowBackground(i == selection ? Color.red.opacity(0.5) : .white)
.tag(i)
}
}
}
}
Here it is in action:
I'm having trouble with what I think may be a bug, but most likely me doing something wrong.
I have a slightly complex navigation state variable in my model that I'm using for tracking/setting state between tab and sidebar presentations when multitasking on iPad. That all works fine except in tab mode, once I use a navigation link once I can't seem to use one again, whether the binding is on my tab view or navigation links in a list.
Would really appreciate any thoughts on this,
Cheers!
Example
NavigationItem.swift
enum SubNavigationItem: Hashable {
case overview, user, hobby
}
enum NavigationItem: Hashable {
case home(SubNavigationItem)
case settings
}
Model.swift
final class Model: ObservableObject {
#Published var selectedTab: NavigationItem = .home(.overview)
}
SwiftUIApp.swift
#main
struct SwiftUIApp: App {
#StateObject var model = Model()
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(model)
}
}
}
ContentView.swift
struct ContentView: View {
var body: some View {
AppTabNavigation()
}
}
AppTabNavigation.swift
struct AppTabNavigation: View {
#EnvironmentObject private var model: Model
var body: some View {
TabView(selection: $model.selectedTab) {
NavigationView {
HomeView()
}
.tabItem {
Label("Home", systemImage: "house")
}
.tag(NavigationItem.home(.overview))
NavigationView {
Text("Settings View")
}
.tabItem {
Label("Settings", systemImage: "gear")
}
.tag(NavigationItem.settings)
}
}
}
HomeView.swift
I created a binding here because selection required an optional <NavigationItem?> not
struct HomeView: View {
#EnvironmentObject private var model: Model
var body: some View {
let binding = Binding<NavigationItem?>(
get: {
model.selectedTab
},
set: {
guard let item = $0 else { return }
model.selectedTab = item
}
)
List {
NavigationLink(
destination: Text("Users"),
tag: .home(.user),
selection: binding
) {
Text("Users")
}
NavigationLink(
destination: Text("Hobbies"),
tag: .home(.hobby),
selection: binding
) {
Text("Hobbies")
}
}
.navigationTitle("Home")
}
}
Second Attempt
I tried making the selectedTab property optional as #Lorem Ipsum suggested. Which means I can remove the binding there. But then the TabView doesn't work with the property. So I create a binding for that and have the same issue but with the tab bar!
Make the selected tab optional
#Published var selectedTab: NavigationItem? = .home(.overview)
And get rid of that makeshift binding variable. Just use the variable
$model.selectedTab
If the variable can never be nil then something is always selected IAW with that makeshift variable it will just keep the last value.
I have a navigation stack that's not quite working as desired.
From my main view, I want to switch over to a list view which for the sake of this example represents an array of strings.
I want to then navigate to a detail view, where I want to be able to change the value of the selected string.
I have 2 issues with below code:
on the very first keystroke within the TextField, the detail view is being dismissed
the value itself is not being changed
Also, I suppose there must be a more convenient way to do the binding in the detail view ...
Here's the code:
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
TestMainView()
}
}
}
struct TestMainView: View {
var body: some View {
NavigationView {
List {
NavigationLink("List View", destination: TestListView())
}
.navigationTitle("Test App")
}
}
}
struct TestListView: View {
#State var strings = [
"Foo",
"Bar",
"Buzz"
]
#State var selectedString: String? = nil
var body: some View {
List(strings.indices) { index in
NavigationLink(
destination: TestDetailView(selectedString: $selectedString),
tag: strings[index],
selection: $selectedString) {
Text(strings[index])
}
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("List")
}
}
}
struct TestDetailView: View {
#Binding var selectedString: String?
var body: some View {
VStack {
if let _ = selectedString {
TextField("Placeholder",
text: Binding<String>( //what's a better solution here?
get: { selectedString! },
set: { selectedString = $0 }
)
)
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())
}
Spacer()
}
.navigationTitle("Detail")
}
}
struct TestMainView_Previews: PreviewProvider {
static var previews: some View {
TestMainView()
}
}
I am quite obviously doing it wrong, but I cannot figure out what to do differently...
You're changing the NavigationLink's selection from inside the NavigationLink which forces the TestListView to reload.
You can try the following instead:
struct TestListView: View {
#State var strings = [
"Foo",
"Bar",
"Buzz",
]
var body: some View {
List(strings.indices) { index in
NavigationLink(destination: TestDetailView(selectedString: self.$strings[index])) {
Text(self.strings[index])
}
}
}
}
struct TestDetailView: View {
#Binding var selectedString: String // remove optional
var body: some View {
VStack {
TextField("Placeholder", text: $selectedString)
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())
Spacer()
}
}
}
I have a MasterDetailView within a Tabbed View. If the user tabs the MasterDetailView and selects an entry in the master view, the detail is presented in the detail view. After selecting another tab and switching back to the MasterDetailView, the detail is no longer selected - the MasterDetailView completely loses its state like is is completely rendered.
private let dateFormatter: DateFormatter = {
let dateFormatter = DateFormatter()
dateFormatter.dateStyle = .medium
dateFormatter.timeStyle = .medium
return dateFormatter
}()
struct MasterDetailView: View {
#State private var dates = [Date]()
var body: some View {
NavigationView {
MasterView(dates: $dates)
.navigationBarTitle(Text("Master"))
.navigationBarItems(
leading: EditButton(),
trailing: Button(
action: {
withAnimation { self.dates.insert(Date(), at: 0) }
}
) {
Image(systemName: "plus")
}
)
DetailView()
}.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
struct MasterView: View {
#Binding var dates: [Date]
var body: some View {
List {
ForEach(dates, id: \.self) { date in
NavigationLink(
destination: DetailView(selectedDate: date)
) {
Text("\(date, formatter: dateFormatter)")
}
}.onDelete { indices in
indices.forEach { self.dates.remove(at: $0) }
}
}
}
}
struct DetailView: View {
var selectedDate: Date?
var body: some View {
Group {
if selectedDate != nil {
Text("\(selectedDate!, formatter: dateFormatter)")
} else {
Text("Detail view content goes here")
}
}.navigationBarTitle(Text("Detail"))
}
}
struct ContentView: View {
#State private var selection = 0
var body: some View {
TabView(selection: $selection){
Text("First View")
.font(.title)
.tabItem {
VStack {
Image("first")
Text("First")
}
}
.tag(0)
MasterDetailView()
.tabItem {
VStack {
Image("second")
Text("Master Detail")
}
}
.tag(1)
}
}
}
Is there a way to "reuse" the MasterDetailView when the user selects that tab?
I know I can use #State and #Binding to save and restore the state (like the selected entry in the master view) and in that simple example that might be a solution. But in a complex app - for example when the MasterDetailView includes a deep view hierarchy - it's not useful to manage (save and restore) the complete state of a view.
Variations on this question have been asked several times, and so far, the consensus is that SwiftUI does not support this use case yet. I'm sure it's on their radar, but the more people who ask for this feature, the more likely it will be prioritized for next year's updates.
Here's an answer where someone got the behavior you're wanting by wrapping UITabBarController for use with SwiftUI.
I'd like to use the EditButton() to toggle edit mode, and have my list rows switch to edit mode. I want to include a new button in edit mode for opening a modal. I can't even get the EditMode value to switch the row content at all.
struct ContentView: View {
#Environment(\.editMode) var isEditMode
var sampleData = ["Hello", "This is a row", "So is this"]
var body: some View {
NavigationView {
List(sampleData, id: \.self) { rowValue in
if (self.isEditMode?.value == .active) {
Text("now is edit mode") // this is never displayed
} else {
Text(rowValue)
}
}
.navigationBarTitle(Text("Edit A Table?"), displayMode: .inline)
.navigationBarItems(trailing:
EditButton()
)
}
}
}
You need to set the environment value for editMode in the List:
struct ContentView: View {
#State var isEditMode: EditMode = .inactive
var sampleData = ["Hello", "This is a row", "So is this"]
var body: some View {
NavigationView {
List(sampleData, id: \.self) { rowValue in
if (self.isEditMode == .active) {
Text("now is edit mode")
} else {
Text(rowValue)
}
}
.navigationBarTitle(Text("Edit A Table?"), displayMode: .inline)
.navigationBarItems(trailing: EditButton())
.environment(\.editMode, self.$isEditMode)
}
}
}
You need to be careful, and make sure .environment(\.editMode, self.$isEditMode) comes after .navigationBarItems(trailing: EditButton()).
Adding to #kontiki answer, if you prefer using a boolean value for editMode so it is easier to modify, use this #State variable:
#State var editMode: Bool = false
And modify the .environment modifier to this:
.environment(\.editMode, .constant(self.editMode ? EditMode.active : EditMode.inactive))
Now switching to/from edit mode with your own button is as easy as:
Button(action: {
self.editMode = !self.editMode
}, label: {
Text(!self.editMode ? "Edit" : "Done")
})