I created view using Function and which i am calling from another view (AbcView), I want to perform normal #Binding with that, but not sure how to pass value and create #Binding in function.
In Below code I want to pass selectedPassengerId from AbcView to function topSheetClassViews and perform #Binding whenever value passengerIds in SelectedTitleView is updating so that I can get updated value in AbcView.
import SwiftUI
struct AbcView: View {
#StateObject var abcViewModel: AbcViewModel
#State private var selectedPassengerId: Int?
init(accessibiltyID: String, abcViewModel: AbcViewModel) {
self._abcViewModel = StateObject(wrappedValue: abcViewModel)
}
var body: some View {
VStack(spacing: 0) {
// Some Design
}
.overlay(
TopView((accessibilityID: accessibilityID, content: topSheetClassViews(abcViewModel: abcViewModel), selectedRowID: $selectedPassengerId, rowHeight: $rowHeight),, alignment: .top
)
)
}
}
func topSheetClassViews(abcViewModel: AbcViewModel) -> [AnyView] {
var views: [AnyView] = []
for passenger in 0..<abcViewModel.Passengers.count {
views.append(TopSheetPassengerInfoView(abcViewModel: abcViewModel, index: passenger).convertToAnyView())
}
return views
}
struct SelectedTitleView: View {
#ObservedObject var abcViewModel: AbcViewModel
var passengerIds: Int
var body: some View {
VStack(alignment: .trailing) {
Text("passengerIds \(passengerIds)") // here getting correct id which I want to pass to AbcView
Text(abcViewModel.passengerTitle(passengerId: passengerIds))
}
}
}
struct TopSheetPassengerInfoView: View {
#ObservedObject var abcViewModel: AbcViewModel
var index: Int
var body: some View {
VStack(alignment: .leading, spacing: 0) {
Text(abcViewModel.passengers[index].fullName ?? "")
SelectedTitleView(abcViewModel: abcViewModel, passengerIds: Int(abcViewModel.Passengers[index].passengerId ?? "") ?? 0)
}
}
}
Just put it through everywhere you need to pass it, like
here
func topSheetClassViews(abcViewModel: AbcViewModel, selection: Binding<Int?>) -> [AnyView] {
here
views.append(TopSheetPassengerInfoView(abcViewModel: abcViewModel, selectedID: selection, index: passenger).convertToAnyView())
here
struct TopSheetPassengerInfoView: View {
#ObservedObject var abcViewModel: AbcViewModel
#Binding var selectedID: Int?
and so on
Related
I am trying to call a detailed view of an item when an item is tapped. In this case, the item is a pair of trousers in the MarketplaceTrouserView. When I call TrouserDetailView, I get an error. This must be to do with initialising but I've repeatedly tried this and failed. What could be the solution?
MarketplaceTrouserView:
import SwiftUI
struct MarketplaceTrouserView: View {
#StateObject var MarketplaceModel = MarketplaceViewModel()
#State private var selectedMarketplaceFilter: MarketplaceFilterViewModel = .trouser
#State var showDetailTrouser = false
#State var selectedTrouser : Trouser!
#EnvironmentObject var sharedData: SharedDataModel
var body: some View {
var columns = Array(repeating: GridItem(.flexible()), count: 2)
ZStack{
VStack{
HStack {
Text("Find Trousers To Buy")
}
}
}
if MarketplaceModel.trousers.isEmpty{
ProgressView()
}
else{
ScrollView {
LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: 10), count: 2),spacing: 20){
ForEach(MarketplaceModel.filteredTrouser){trouser in
// Trouser items in grid view
TrouserView(trouserData: trouser)
.onTapGesture {
withAnimation {
selectedTrouser = trouser
showDetailTrouser.toggle()
}
}
}
}
}
}
}
if selectedTrouser != nil && showDetailTrouser{
TrouserDetailView(/*Here is the error asking for trouserData & showDetailTrouser*/)
}
}
}
}
TrouserDetailView:
import SwiftUI
import SDWebImageSwiftUI
struct TrouserDetailView: View {
#State var trouserData : Trouser
#State var showDetailTrouser: Bool
#EnvironmentObject var sharedData: SharedDataModel
#EnvironmentObject var marketplaceData: MarketplaceViewModel
var body: some View {
ScrollView {
VStack{
HStack {
Button(action: {
withAnimation(.easeOut){showDetailTrouser.toggle()}
}) {
Image(systemName: "arrow.backward.circle.fill")
}
Text(trouserData.trouser_name)
}
VStack {
WebImage(url: URL(string: trouserData.trouser_image))
}
}
}
}
Trouser Model:
import SwiftUI
import FirebaseFirestoreSwift
import Firebase
struct Trouser: Identifiable, Codable {
#DocumentID var id: String?
var trouser_name: String = ""
var trouser_image: String = ""
}
The error is when i call TrouserDetailView (as marked in the code)
After applying changes, my MainPage view has errors in the initialiser.
MainPage
struct MainPage: View {
#StateObject var appModel: AppViewModel = .init()
#StateObject var sharedData: SharedDataModel = SharedDataModel()
#State var shirtData : Shirt
#State var showDetailShirt: Bool
#State var trouserData : Trouser
#State var showDetailTrouser: Bool
#Namespace var animation
init () {
#State var shirtData = Shirt()
#State var showDetailShirt = false
#State var trouserData = Trouser()
#State var showDetailTrouser = false
UITabBar.appearance().isHidden = true
} //ERROR HERE: 'Return from initializer without initializing all stored properties'
var body: some View {
VStack {
TabView(selection: $appModel.currentTab) {
Marketplace()
.environmentObject(sharedData)
.tag(Tab.Market)
.setUpTab()
Home()
.environmentObject(sharedData)
.tag(Tab.Home)
.setUpTab()
}
By the logic of provided code, state is not needed for the first one and second should be replaced with binding, ie.
struct TrouserDetailView: View {
var trouserData : Trouser
#Binding var showDetailTrouser: Bool
// ...
and call
if selectedTrouser != nil && showDetailTrouser {
TrouserDetailView(trouserData: selectedTrouser,
showDetailTrouser: $showDetailTrouser)
}
#State var trouserData : Business
#State var showDetailTrouser: Bool
These variables you must initialize the value locally or switch to #Binding to bind the data with the parent variables.
I am having property with #StateObject, I am trying to observe change in viewmodel, I am able to print correct result but can not able to show on screen as view is not refreshing.
Tried using binding but not worked because of #StateObject
import SwiftUI
struct AbcView: View {
#StateObject var abcViewModel: AbcViewModel
init(abcViewModel: AbcViewModel) {
self._abcViewModel = StateObject(wrappedValue: abcViewModel)
}
var body: some View {
VStack(alignment: .leading) {
ZStack(alignment: .top) {
ScrollView {
Text("some txt")
}
.overlay(
VStack {
TopView(content: classViews(data: $abcViewModel.somedata, abcViewModel: abcViewModel))
Spacer()
}
)
}
}
}
}
func classViews(data: Binding<[SomeData]>, abcViewModel: AbcViewModel) -> [AnyView] {
var views: [AnyView] = []
for element in data {
views.append(
VStack(spacing: 0) {
HStack {
print("\(abcViewModel.title(Id: Int(element.dataId.wrappedValue ?? "")) )") // printing correct value
Text(abcViewModel.title(Id: Int(element.dataId.wrappedValue ?? ""))) // want to observe change here
}
}
.convertToAnyView())
}
return views
}
If you are injecting your AbcViewModel into AbcView you should use #ObserverdObject instead of #StateObject , full explanation here Also you should conform tour AbcViewModel to ObservableObject and make your desired property #Published if you want to trigger the change in View . Here is simplified code example:
Making AbcViewModel observable:
class AbcViewModel: ObservableObject {
#Published var dataID: String = "" //by changing the #Published proprty you trigger change in View using it
}
store AbcViewModel as #ObserverdObject:
struct AbcView: View {
#ObservedObject var abcViewModel: AbcViewModel
init(abcViewModel: AbcViewModel) {
self.abcViewModel = abcViewModel
}
var body: some View {
//...
}
}
If you now use your AbcViewModel dataID property anywhere in the project, and you change its value, the property will publish the change and your View (struct) will be rebuilded. Use the same pattern for creating TopView and assigning AbcViewModel to it the same way.
I don't manage to trigger the onReceive method in a SwiftUI View whenever a variable from ObservedObject changes.
I tried two methods: using #Publish and using PassthroughSubject<>
Here is the ViewModel
class MenuViewModel: ObservableObject {
#Published var selectedItems = Set<UUID>()
#Published var currentFocusItem: UUID?
// Output
let newItemOnFocus = PassthroughSubject<(UUID?), Never>()
// This function gets called good :)
func tapOnMenuItem(_ item: MenuItem) {
if selectedItems.contains(item.id) {
//These changes should trigger the onReceive?
currentFocusItem = item.id
newItemOnFocus.send(item.id)
} else {
selectedItems.insert(item.id)
currentFocusItem = nil
newItemOnFocus.send(nil)
}
}
}
Here is the View when trying to catch the changes in #Published var currentFocusItem
struct MenuView: View {
#ObservedObject private var viewModel: MenuViewModel
#State var showPicker = false
#State private var menu: Menu = Menu.mockMenu()
init(viewModel: MenuViewModel = MenuViewModel()) {
self.viewModel = viewModel
}
var body: some View {
VStack {
List(menu.items, selection: $viewModel.selectedItems) { item in
MenuItemView(item: item)
}
Divider()
getBottomView(showPicker: showPicker)
}
.navigationBarTitle("Title")
.navigationBarItems(trailing: Button(action: closeModal) {
Image(systemName: "xmark")
})
.onReceive(viewModel.$currentFocusItem, perform: { itemUUID in
self.showPicker = itemUUID != nil // <-- This only gets called at launch time
})
}
}
The View in the same way but trying to catch the PassthroughSubject<>
.onReceive(viewModel.newItemOnFocus, perform: { itemUUID in
self.showPicker = itemUUID != nil // <-- This never gets called
})
----------EDIT----------
Adding MenuItemView, although viewModel.tapOnMenuItem gets always called, so I am not sure if it's very relevant
MenuItemView is here:
struct MenuItemView: View {
var item: MenuItem
#ObservedObject private var viewModel: MenuViewModel = MenuViewModel()
#State private var isSelected = false
var body: some View {
HStack(spacing: 24) {
Text(isSelected ? " 1 " : item.icon)
.font(.largeTitle)
.foregroundColor(.blue)
.bold()
VStack(alignment: .leading, spacing: 12) {
Text(item.name)
.bold()
Text(item.description)
.font(.callout)
}
Spacer()
Text("\(item.points)\npoints")
.multilineTextAlignment(.center)
}
.padding()
.onTapGesture {
self.isSelected = true
self.viewModel.tapOnMenuItem(self.item). // <-- Here tapOnMenuItem gets called
}
}
func quantityText(isItemSelected: Bool) -> String {
return isItemSelected ? "1" : item.icon
}
}
What am I doing wrong?
Well, here it is - your MenuView and MenuItemView use different instances of view model
1)
struct MenuView: View {
#ObservedObject private var viewModel: MenuViewModel
#State var showPicker = false
#State private var menu: Menu = Menu.mockMenu()
init(viewModel: MenuViewModel = MenuViewModel()) { // 1st one created
2)
struct MenuItemView: View {
var item: MenuItem
#ObservedObject private var viewModel: MenuViewModel = MenuViewModel() // 2nd one
thus, you modify one instance, but subscribe to changes in another one. That's it.
Solution: pass view model via .environmentObject or via argument from MenuView to MenuItemView.
I am tearing out my hair trying to figure out how to bind the picked value in my SwiftUI view:
The picker needs to be bound to the Int returned from the tags. I need to covert this Int to the String and set the Binding. How?
struct ContentView: View {
#Binding var operatorValueString:String
var body: some View {
Picker(selection: queryType, label: Text("Query Type")) {
ForEach(0..<DM.si.operators.count) { index in
Text(DM.si.operators[index]).tag(index)
}
}.pickerStyle(SegmentedPickerStyle())
}
}
How and where can I set my operatorValueString ?
operatorValueString = DM.si.operators[queryType] //won't compile.
You can achieve the result, using your own custom binding that sets the string, whenever the picker's selection changes:
struct ContentView: View {
#State private var operatorString = ""
var body: some View {
VStack {
Subview(operatorValueString: $operatorString)
Text("Selected: \(operatorString)")
}
}
}
struct Subview: View {
#Binding var operatorValueString: String
#State private var queryType: Int = 0
let operators = ["OR", "AND", "NOT"]
var body: some View {
let binding = Binding<Int>(
get: { self.queryType },
set: {
self.queryType = $0
self.operatorValueString = self.operators[self.queryType]
})
return Picker(selection: binding, label: Text("Query Type")) {
ForEach(operators.indices) { index in
Text(self.operators[index]).tag(index)
}
}.pickerStyle(SegmentedPickerStyle())
}
}
I am trying to have a Picker that shows which option is currently selected.
Try out the following code which correctly selects the right option but the picker does not show which option is selected:
import SwiftUI
struct ContentView: View {
#State var selectedIndex: Int = 0
let strings: [String] = {
var strings: [String] = []
for i in 0..<10 {
strings.append("\(i)")
}
return strings
}()
var body: some View {
NavigationView {
VStack {
Form {
Picker(selection: $selectedIndex,
label: Text("Selected string: \(strings[selectedIndex])")) {
ForEach(0..<strings.count) {
Text(self.strings[$0]).tag($0)
}
}
}
}
.navigationBarTitle("Form Picker",
displayMode: NavigationBarItem.TitleDisplayMode.inline)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Anyone know what could be wrong? It's observed using Xcode 11.1 and iOS 13.1
I created the simple picker I call "ListPicker" which should fit the bill. I've written it so it works well in a Form; if you need it outside of a Form you will have to tinker with it. If you see any way to improve the code, please add a comment; this is still a learning experience for all of us.
// MARK: - LIST PICKER (PUBLIC)
struct ListPicker<Content: View>: View {
#Binding var selectedItem: Int
var label: () -> Content
var data: [Any]
var selectedLabel: String {
selectedItem >= 0 ? "\(data[selectedItem])" : ""
}
var body: some View {
NavigationLink(destination: ListPickerContent(selectedItem: self.$selectedItem, data: self.data)) {
ListPickerLabel(label: self.label, value: "\(self.selectedLabel)")
}
}
}
// MARK: - INTERNAL
private struct ListPickerLabel<Content: View>: View {
let label: () -> Content
let value: String
var body: some View {
HStack(alignment: .center) {
self.label()
Spacer()
Text(value)
.padding(.leading, 8)
}
}
}
private struct ListPickerContentItem: View {
let label: String
let index: Int
let isSelected: Bool
var body: some View {
HStack {
Text(label)
Spacer()
if isSelected {
Image(systemName: "checkmark")
.foregroundColor(.accentColor)
}
}.background(Color.white) // so the entire row is selectable
}
}
private struct ListPickerContent: View {
#Environment(\.presentationMode) var presentationMode
#Binding var selectedItem: Int
var data: [Any]
var body: some View {
List {
ForEach(0..<data.count) { index in
ListPickerContentItem(label: "\(self.data[index])", index: index, isSelected: index == self.selectedItem).onTapGesture {
self.selectedItem = index
self.presentationMode.wrappedValue.dismiss()
}
}
}
}
}
Then you can use it like this:
#State var selectedCar: Int = 0
let cars = ["Jaguar", "Audi", "BMW", "Land Rover"]
Form {
ListPicker(
selectedItem: self.$selectedCar,
label: {
Text("Cars")
},
data: self.cars
)
}